/* 素笺 · components.css — 白卡 / 四按钮 / 类型角标 / 按钮 / 分页 / 筛选 / 详情
   铁律：颜色走 --token（生成器发射的 --accent/--muted/--line/--t-* 等），零 --hx- 写死（守禁六/D6）。 */

/* 列表网格：固定列数（v19.19 恢复用户铁律：右栏显示 5 列 / 不显示 6 列）
   之前某轮误改成 auto-fill 自适应按宽度决定列数，会随屏宽漂到 3-4 列，破坏"固定 5/6 列"要求 → 改固定列数
   注：右栏状态挂在 .sj-three-col 的 data-right 上（hidden=不显示 / 默认&expanded=显示），旧版 #sjThreeCol[id] 选择器是笔误永不生效，已废 */
.card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-lg); }  /* 默认：右栏显示 → 5 列 */
.sj-three-col[data-right="hidden"] .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }       /* 右栏隐藏 → 6 列（主区更宽多一列） */
/* 窄屏兜底（移动端 5/6 列会挤成细条，按宽度逐步降列保持可读，守禁六 gap 用 --spacing-lg） */
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { .card-grid { grid-template-columns: 1fr; } }

/* ===== 素笺白卡（v19.13 对齐原型「封面三件套」：左上类型角标 + 居中水印字形 + 静止阴影） ===== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-pad, 12px);            /* 卡片内边距（令牌，守禁六） */
  box-shadow: var(--shadow);                 /* 静止极淡阴影（原型 v4，非仅 hover） */
  overflow: hidden; display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--line-hover); }

/* 封面：统一 3:2，顶部圆角，素笺纸感底；始终渲染（有图出图、无图出水印） */
.card-cover { position: relative; aspect-ratio: 3 / 2; background: var(--bg-soft); overflow: hidden; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.card-cover-link { position: absolute; inset: 0; display: block; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 无图水印字形（素笺墨痕 · 令牌化，守禁六：用 --ink + 透明度，不写死 rgba） */
.cf-glyph { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: 56px; line-height: 1; color: var(--ink); opacity: .14; user-select: none; }
/* 无图生成式书名卡（2026-09-27：替代淡墨字形水印；守禁六：类型色走 --t-* 变量，零写死；令牌化）
   填满 .card-cover（position:absolute; inset:0），类型色线索由 .cf-gen[data-type] 承担，整站与 .cf-tag 同款。 */
.cf-gen { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 16px; text-align: center; box-sizing: border-box; background: linear-gradient(150deg, var(--bg-soft), var(--bg)); }
.cf-gen-type { font-size: var(--fs-xs); letter-spacing: .18em; font-weight: 600; opacity: .85; }
.cf-gen-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: clamp(15px, 1.4vw, 20px); line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-width: 92%; }
.cf-gen[data-type="article"]      .cf-gen-type { color: var(--t-article); }
.cf-gen[data-type="encyclopedia"] .cf-gen-type { color: var(--t-encyclopedia); }
.cf-gen[data-type="album"]        .cf-gen-type { color: var(--t-album); }
.cf-gen[data-type="library"]      .cf-gen-type { color: var(--t-library); }
.cf-gen[data-type="video"]        .cf-gen-type { color: var(--t-video); }
.cf-gen[data-type="costume"]      .cf-gen-type { color: var(--t-costume); }
/* 封面左上角标：白底深字 pill（v19.17 + v19.18）
   历经 5 版迭代：
   - v19.13：类型色实底 + 白字 ribbon —— 在浅色封面上字色与背景融
   - v19.15：缩尺寸 + 加粗 + 文字阴影 —— 解决尺寸感，但弱类型色底+白字仍融
   - v19.16：加 1px 白边 + 浮起阴影 + 文字加深 —— 削弱渐强，但浅绿/浅赭类型色和白字仍偏弱
   - v19.17：彻底改黑白反差 + 左 3px 类型色边线（白底92%透 + 深墨字 + pill）
   - v19.18（精简）：删左 3px 类型色条 —— 用户"简单一点，左侧不要再来一个色框了"，
     类型色线索由 `.card[data-type]` 容器承担（卡片本身在网格中已区分），pill 不再夹带。
   守禁六：底色 / 字色 / 阴影全走 var()，零写死 rgba/hex。 */
.card-cover .cf-tag {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  font-size: 12px; color: var(--tag-fg);
  background: var(--tag-bg);
  padding: 3px 10px; border-radius: var(--radius-pill, 999px);
  font-weight: 600; letter-spacing: 0; line-height: 1.5;
  white-space: nowrap;
}

.card-body { margin-top: var(--spacing-sm); padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1 1 auto; }
.card-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-lg); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--accent); text-decoration: none; }
.card-excerpt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 类型角标（消费 C1 发射的 --t-*，禁六零写死） */
.cf-tag { display: inline-block; font-size: var(--fs-xs); padding: 2px 10px; border-radius: var(--radius-full); font-weight: 500; line-height: 1.6; }
.cf-tag[data-type="article"]      { color: var(--t-article);      background: var(--t-article-bg); }
.cf-tag[data-type="encyclopedia"] { color: var(--t-encyclopedia);  background: var(--t-encyclopedia-bg); }
.cf-tag[data-type="album"]        { color: var(--t-album);        background: var(--t-album-bg); }
.cf-tag[data-type="library"]      { color: var(--t-library);       background: var(--t-library-bg); }
.cf-tag[data-type="video"]        { color: var(--t-video);         background: var(--t-video-bg); }
.cf-tag[data-type="costume"]      { color: var(--t-costume);       background: var(--t-costume-bg); }

/* 卡片页脚 v19.14（结构由 core/helpers.php::card_acts_html() 产出：头像左 / 裸图标右 / 文内引用关联信息行）
   视觉铁律（v19.14）：
   - .card-act 无 border、无 bg、无胶囊圆角 → 裸图标 + 计数（仅 hover/active 变 accent 色）
   - .card-foot-av 左侧 24×24 圆头像，无边框（仅底色），缺作者时回退管理员"虫哥"
   - .card-refs 仅在 cite_count 或 rel_count > 0 时渲染（守禁五·零冗余兜底） */
.card-foot { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: auto; padding-top: var(--spacing-sm); border-top: 1px solid var(--line); min-width: 0; }
.card-foot-av {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center;
}
.card-foot-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-foot-acts { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.card-act {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: var(--fs-xs);
  padding: 4px 2px; border-radius: 0;
  font-family: inherit; line-height: 1; transition: color var(--transition-fast);
}
.card-act:hover { color: var(--accent); }
.card-act.active { color: var(--accent); font-weight: 600; }   /* 守用户强指令：active 仅变色，不再画边框胶囊 */
.card-act .ic { width: 12px; height: 12px; display: block; opacity: .85; }
.card-act .cnt { font-size: var(--fs-xs); font-weight: 500; min-width: 14px; text-align: center; }

/* 文内引用 / 关联信息行（v19.14 新增，可选：counts 为 0 时不渲染） */
.card-refs {
  display: inline-flex; align-items: center; gap: 4px 8px;
  margin-left: 10px;
  font-size: var(--fs-xs); color: var(--ink-3); flex-wrap: wrap; min-width: 0;
}
.card-refs .cr-sep { font-style: normal; opacity: .55; user-select: none; }
.card-refs .cr-cite, .card-refs .cr-rel { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.card-refs .cr-cite:hover, .card-refs .cr-rel:hover { color: var(--accent); }

/* 小屏：脚紧凑（头像缩到 22，refs 允许换行） */
@media (max-width: 480px) {
  .card-foot { gap: 6px; }
  .card-foot-av { width: 22px; height: 22px; }
  .card-foot-acts { gap: 6px; }
}

/* ===== 按钮 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--button-radius); border: 1px solid transparent; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-danger { background: var(--danger); color: var(--on-accent); }
.btn-danger:hover { background: var(--danger-dark); text-decoration: none; }
.btn-sm { padding: 5px 12px; font-size: var(--fs-xs); border-radius: var(--button-radius); }

/* ===== 统一表单基类（FY01-08 §11.1：输入框走 token + focus 金色描边，零写死） ===== */
.sj-field, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], textarea, select {
  display: block; width: 100%; box-sizing: border-box;
  padding: 9px 12px; font-size: var(--fs-sm); font-family: inherit; line-height: 1.5;
  color: var(--ink); background: var(--bg-main);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sj-field:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="url"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}

/* ===== 分页 ===== */
.pagination { display: flex; gap: 6px; justify-content: center; margin: var(--spacing-xl) 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); padding: 0 8px; }
.pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ===== 筛选栏（单行入口 + 下拉分面 + 已选项另起一行） ===== */
.sj-filter-topbar { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: var(--spacing-sm) 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.sj-list-pagehead > .sj-filter-topbar { background: transparent; border: 0; padding: 0; }  /* 融入统一卡片（守禁三/四 去冗余） */

/* 行容器 */
.ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
.ft-row-entries { gap: var(--spacing-sm); }

/* 维度入口 + 下拉面板 */
.dim { position: relative; display: inline-flex; }
.dim-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-2); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.dim-trigger:hover, .dim-trigger.open { color: var(--accent); border-color: var(--accent); background: var(--bg); text-decoration: none; }
.dim-caret { font-size: 10px; line-height: 1; opacity: .6; transition: transform .15s; }
.dim-trigger.open .dim-caret { transform: rotate(180deg); }

.dim-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 210px; max-height: 60vh; overflow: auto; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: var(--spacing-sm); display: flex; flex-direction: column; gap: 4px; }
.dim-panel[hidden] { display: none; }  /* 守铁律·防 .dim-panel 的 display:flex 覆盖 [hidden] 导致面板无法隐藏（下拉不显示根因） */
.dim-panel-sort { min-width: 150px; }
.dim-panel-more { min-width: 300px; }
.dim-more-group { padding-bottom: var(--spacing-xs); border-bottom: 1px solid var(--line); }
.dim-more-group:last-child { padding-bottom: 0; border-bottom: 0; }
.dim-more-label { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-heading, "Noto Serif SC", serif); font-weight: 600; letter-spacing: 1px; margin-bottom: 6px; }

/* 面板内术语（可多层：父→子） */
.ft-term { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.ft-term:hover { color: var(--accent); background: var(--accent-weak); text-decoration: none; }
.ft-term.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .15); }
.ft-term .ft-count { font-size: var(--fs-xs); opacity: .55; font-weight: normal; }
.ft-term.active .ft-count { opacity: .8; }
.ft-term.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }  /* 无内容术语：置灰不可点（守禁五·术语完整但不可选） */
.ft-term-children { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px 6px; padding-left: 14px; border-left: 2px solid var(--line); }

/* 行内搜索框（紧跟更多之后） */
.sj-inline-search { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sj-inline-input { width: 168px; max-width: 42vw; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; }
.sj-inline-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.sj-inline-go { padding: 6px 14px; border: 1px solid var(--accent); color: var(--on-accent); background: var(--accent); border-radius: var(--radius-full); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; transition: background .15s; }
.sj-inline-go:hover { background: var(--accent-strong, var(--accent)); }

/* 已选项汇总条（另起一行）：多选后出现的可移除 chips（与 chip 视觉同源，令牌化零写死） */
.ft-row-selected { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); width: 100%; padding: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-sm); background: var(--accent-weak); border: 1px solid var(--accent-line, var(--accent)); border-radius: var(--radius-md); }
.ft-sel-tip { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-heading, "Noto Serif SC", serif); font-weight: 600; letter-spacing: 1px; flex: 0 0 auto; }
.ft-sel-item { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; font-size: var(--fs-sm); color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-full); line-height: 1.5; text-decoration: none; transition: background .15s, box-shadow .15s; }
.ft-sel-item:hover { color: var(--on-accent); background: var(--accent-strong, var(--accent)); text-decoration: none; box-shadow: 0 1px 3px rgba(var(--ink-rgb), .18); }
.ft-sel-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: var(--on-accent); font-size: 12px; line-height: 1; flex: 0 0 auto; transition: background .15s; }
.ft-sel-x:hover { background: rgba(255, 255, 255, .4); }
.ft-sel-clear { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; padding: 4px 6px; flex: 0 0 auto; transition: color .15s; }
.ft-sel-clear:hover { color: var(--err, var(--accent)); text-decoration: underline; }

/* 区间筛选（Phase 3）：数值字段 min~max 输入 + 应用 */
.dim-range { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dim-range-label { font-size: var(--fs-sm); color: var(--ink-2); flex: 0 0 auto; min-width: 48px; }
.dim-range-inputs { display: inline-flex; align-items: center; gap: 6px; }
.dim-range-input { width: 76px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; }
.dim-range-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.dim-range-sep { color: var(--ink-2); opacity: .6; }
.dim-range-apply { padding: 4px 12px; border: 1px solid var(--accent); color: var(--accent); background: var(--card-bg); border-radius: var(--radius-full); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
.dim-range-apply:hover { background: var(--accent); color: var(--on-accent); }

/* 布尔快速过滤开关（Phase 3）：has_image / free / downloadable */
.dim-bools { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.dim-bool { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); background: var(--card-bg); transition: color .15s, border-color .15s, background .15s; }
.dim-bool:hover { color: var(--accent); border-color: var(--accent); background: var(--bg); text-decoration: none; }
.dim-bool.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .15); }

/* 长列表维度面板内术语搜索（Phase 4） */
.dim-term-search { width: 100%; box-sizing: border-box; padding: 6px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-main); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; }
.dim-term-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }

/* 保存筛选弹层（Phase 2） */
.sf-save-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: var(--spacing-sm); display: flex; flex-direction: column; gap: 6px; }
.sf-save-input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-main); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; }
.sf-save-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.sf-save-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sf-save-ok, .sf-save-cancel { padding: 5px 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-2); }
.sf-save-ok { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.sf-save-ok:hover { background: var(--accent-strong, var(--accent)); }
.sf-save-cancel:hover { border-color: var(--accent); color: var(--accent); }

/* 我的筛选列表（Phase 2） */
.dim-panel-saved { min-width: 240px; }
.sf-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.sf-empty { font-size: var(--fs-sm); color: var(--ink-2); padding: 4px 0; }
.sf-item-row { display: flex; align-items: center; gap: 6px; }
.sf-item { flex: 1 1 auto; display: block; padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; border: 1px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-item:hover { color: var(--accent); background: var(--accent-weak); text-decoration: none; }
.sf-del { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card-bg); color: var(--ink-2); font-size: 12px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; }
.sf-del:hover { color: var(--err, var(--accent)); border-color: var(--err, var(--accent)); }

/* 移动端底部抽屉遮罩（Phase 4） */
.dim-backdrop { position: fixed; inset: 0; background: rgba(var(--ink-rgb), .45); z-index: 55; }

/* 保存/操作 toast（Phase 2） */
.sf-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px); z-index: 80; padding: 9px 18px; border-radius: var(--radius-full); background: var(--ink); color: #fff; font-size: var(--fs-sm); font-family: inherit; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sf-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 移动端：下拉面板变底部抽屉（Phase 4） */
@media (max-width: 720px) {
  .sj-filter-topbar .dim-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 75vh;
    border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .22s ease; z-index: 60;
    box-shadow: 0 -8px 24px rgba(var(--ink-rgb), .18);
  }
  /* 覆盖桌面 .dim-panel[hidden]{display:none}：移动端用位移收起而非 display（保证滑入过渡） */
  .sj-filter-topbar .dim-panel[hidden] { display: flex; transform: translateY(100%); pointer-events: none; }
  .sj-filter-topbar .dim-panel:not([hidden]) { transform: translateY(0); }
  .sj-inline-search { margin-left: 0; width: 100%; }
  .sj-inline-input { width: 100%; max-width: none; }
}

/* ===== 详情页 ===== */
.detail-wrap { display: flex; gap: var(--spacing-xl); align-items: flex-start; }
.detail-main { flex: 1 1 auto; min-width: 0; }
.detail-meta { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--spacing-md); }
@media (max-width: 960px) { .detail-wrap { flex-direction: column; } }

/* 详情页：作者块 + 关注（port 自原型 .detail-author，令牌化，零写死） */
.detail-author { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg); }
.da-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--card-bg); flex: 0 0 auto; }
.da-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.da-line { display: flex; align-items: center; gap: 8px; }
.da-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.da-badge { font-size: var(--fs-xs); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-full); padding: 1px 8px; line-height: 1.5; }
.da-badge--owner { color: var(--muted); border-color: var(--line); }  /* 默认站点作者（管理员）徽章：去强调，区别于认证作者 */
.da-bio { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.da-follow { align-self: flex-start; margin-left: auto; padding: 5px 18px; border: 1px solid var(--accent); color: var(--accent); background: var(--card-bg); border-radius: var(--radius-full); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s, color .15s; }
.da-follow:hover { background: var(--accent-weak); }
.da-follow.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 560px) { .detail-author { flex-wrap: wrap; } .da-follow { margin-left: 0; } }

/* ===== 详情页增强（对齐原型 FY26-08 图书馆立轴 / 阅读进度，令牌化·零写死·双主题自适应） ===== */
/* 图书馆内页：立轴封面（原型 .lib-hero；颜色走 --lib-* 令牌，深色自动覆盖） */
.lib-hero { display:flex; gap:28px; align-items:stretch; background:linear-gradient(135deg,var(--lib-paper-1),var(--lib-paper-2)); border:1px solid var(--line); border-radius:var(--radius-card); padding:30px; box-shadow:var(--shadow); margin-top:8px; }
.lib-hero-cover { position:relative; width:160px; min-height:240px; background:linear-gradient(150deg,var(--lib-cover-1),var(--lib-cover-2) 60%,var(--lib-cover-3)); border-radius:6px 16px 16px 6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:8px 12px 24px var(--lib-cover-shadow), inset 0 0 0 1px var(--lib-cover-inner); overflow:hidden; }
.lib-hero-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.lib-hero-spine { position:absolute; left:0; top:0; bottom:0; width:14px; background:linear-gradient(180deg,var(--lib-spine-1),var(--lib-spine-2) 50%,var(--lib-spine-1)); box-shadow:inset 0 0 0 1px var(--lib-spine-inner); }
.lib-hero-spine::after { content:''; position:absolute; left:50%; top:14px; bottom:14px; width:1.5px; background:var(--lib-spine-line); transform:translateX(-50%); }
.lib-hero-title { font-family:var(--serif); font-size:78px; font-weight:700; color:var(--lib-ink); line-height:1; letter-spacing:-.02em; text-shadow:0 1px 0 var(--lib-title-shadow); position:relative; z-index:2; }
.lib-hero-foot { position:absolute; left:20px; right:12px; bottom:14px; font-family:var(--serif); font-size:13px; color:var(--lib-ink-2); text-align:center; letter-spacing:.22em; opacity:.85; z-index:2; }
.lib-hero-corner { position:absolute; top:0; right:0; width:24px; height:24px; background:linear-gradient(135deg,transparent 50%,var(--lib-ink-2) 50%); border-radius:0 8px 0 0; }
.lib-hero-seal { position:absolute; right:12px; top:62px; width:54px; height:54px; border-radius:6px; background:var(--lib-seal); color:var(--on-accent); display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; line-height:1; box-shadow:2px 3px 8px var(--lib-seal-shadow); transform:rotate(-4deg); z-index:3; }
.lib-hero-seal::before { content:''; position:absolute; inset:3px; border:1px solid var(--lib-seal-border); border-radius:4px; }
.lib-hero-seal { font-size:22px; }
.lib-hero-seal span { font-size:11px; letter-spacing:.06em; margin-top:2px; opacity:.95; }
.lib-hero-side { flex:1; display:flex; flex-direction:column; min-width:0; }
.lib-hero-type { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--accent); font-weight:600; padding:4px 12px; border-radius:var(--radius-pill); background:var(--accent-bg); width:fit-content; margin-bottom:12px; }
.lib-hero-side .lib-hero-title-main { font-family:var(--serif); font-size:30px; font-weight:700; color:var(--ink); line-height:1.3; margin:0 0 16px; }
.lib-hero-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px; padding:14px 18px; background:var(--lib-meta-bg); border:1px dashed var(--line); border-radius:12px; margin-bottom:16px; }
.lib-hero-meta div { display:flex; justify-content:space-between; gap:14px; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--lib-meta-line); }
.lib-hero-meta div:last-child, .lib-hero-meta div:nth-last-child(2) { border-bottom:none; }
.lib-hero-meta .k { color:var(--ink-3); font-family:var(--serif); font-size:12px; }
.lib-hero-meta .v { color:var(--ink); font-weight:600; text-align:right; }
@media (max-width: 640px) { .lib-hero { flex-direction:column; gap:18px; padding:20px; } .lib-hero-cover { width:100%; min-height:200px; } }

/* 阅读进度（原型 .detail-progress，令牌化；全页详情 + 右栏内页共用 base，定位各自上下文） */
.detail-progress { height:3px; background:transparent; flex-shrink:0; overflow:hidden; }
.detail-progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); transition:width .08s linear; }
.detail-main > .detail-progress { position:sticky; top:0; z-index:5; }

/* ===== 详情页：限宽栅格 + 浮动快速导航侧栏（port 自原型 .detail-side；令牌化·零写死） ===== */
.detail-layout { display: grid; grid-template-columns: 56px minmax(0, 760px); gap: 40px; max-width: 880px; margin: 0 auto; align-items: start; }
.detail-layout > .detail-main { min-width: 0; }
/* 全页详情：侧栏默认 sticky 贴随正文滚动（右栏内嵌详情由 layout.css 覆写为 fixed，见 Task #440） */
.detail-side { position: sticky; top: 88px; align-self: start; width: 56px; display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); z-index: 45; }
.ds-item { width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 0; cursor: pointer; color: var(--ink-2); border-radius: 8px; background: none; border: none; font-family: inherit; transition: background .15s, color .15s; }
.ds-item:hover { background: var(--bg-soft); color: var(--accent); }
.ds-item.active { color: var(--accent); }
.ds-item.active .ds-cnt { color: var(--accent); font-weight: 600; }
.ds-item svg { width: 17px; height: 17px; opacity: .85; display: block; }
.ds-item:hover svg { opacity: 1; }
.ds-item .ds-cnt { font-size: 10px; color: var(--ink-3); line-height: 1.2; font-variant-numeric: tabular-nums; }
/* 朗读按钮：对齐 candy 实心圆 + 三态（idle/playing/paused），复用现有令牌，零写死（守禁六） */
.ds-item.ds-tts {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-soft);
  overflow: hidden;
  flex-direction: row;
  color: var(--ink-2);
}
.ds-item.ds-tts:hover { background: var(--gold-soft); color: var(--gold); }
.ds-item.ds-tts.is-playing,
.ds-item.ds-tts.is-paused { background: var(--gold-soft); color: var(--gold); }
/* 三态叠层：absolute 撑满 48×48，z 序 封面(1)→三角(2)→中心图标(3) */
.ds-item.ds-tts .tts-idle,
.ds-item.ds-tts .tts-thumb,
.ds-item.ds-tts .tts-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ds-item.ds-tts .tts-thumb { z-index: 1; }
.ds-item.ds-tts .tts-idle { z-index: 2; }
.ds-item.ds-tts .tts-thumb-play { z-index: 3; }
/* idle：柔色圆 + ▶ 三角 */
.ds-item.ds-tts .tts-thumb-play { display: none; }
.ds-item.ds-tts .tts-idle .ic-play { width: 20px; height: 20px; background: rgba(var(--ink-rgb), .4); border-radius: 50%; padding: 4px; box-sizing: content-box; color: var(--bg, #fff); opacity: 1; }
/* playing / paused：封面旋转/静止 + 中心图标叠加（隐藏 ▶） */
.ds-item.ds-tts.is-playing .tts-idle,
.ds-item.ds-tts.is-paused .tts-idle { display: none; }
.ds-item.ds-tts.is-playing .tts-thumb,
.ds-item.ds-tts.is-paused .tts-thumb { display: flex; }
.ds-item.ds-tts.is-playing .tts-thumb-img,
.ds-item.ds-tts.is-paused .tts-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; animation: tts-spin 6s linear infinite; }
.ds-item.ds-tts.is-paused .tts-thumb-img { animation-play-state: paused; }
.ds-item.ds-tts.is-playing .tts-thumb-play,
.ds-item.ds-tts.is-paused .tts-thumb-play { display: flex; background: radial-gradient(circle, rgba(var(--ink-rgb), .4) 11px, transparent 12px); color: var(--bg, #fff); }
.ds-item.ds-tts .tts-thumb-play .ic-pause,
.ds-item.ds-tts .tts-thumb-play .ic-play { width: 14px; height: 14px; opacity: 1; }
.ds-item.ds-tts.is-playing .tts-thumb-play .ic-pause { display: block; }
.ds-item.ds-tts.is-playing .tts-thumb-play .ic-play { display: none; }
.ds-item.ds-tts.is-paused .tts-thumb-play .ic-pause { display: none; }
.ds-item.ds-tts.is-paused .tts-thumb-play .ic-play { display: block; }
@keyframes tts-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ds-divider { width: 26px; height: 1px; background: var(--line); margin: 6px 0; }
.ds-round { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading, "Noto Serif SC", serif); font-weight: 700; font-size: 15px; cursor: pointer; border: none; text-decoration: none; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 12px rgba(var(--accent-rgb), .28); }
.ds-round:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .35); color: #fff; text-decoration: none; }
.ds-round:active { transform: scale(.96); }
.ds-item.ds-share { padding-top: 9px; padding-bottom: 4px; }
.ds-item.ds-share svg { width: 16px; height: 16px; }
/* 目录浮层（dsToc 点击展开 .sj-prose 章节锚点） */
.ds-toc-pop { position: fixed; left: 50%; transform: translateX(-50%); top: 96px; width: min(320px, 88vw); max-height: 70vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); padding: 12px 14px; z-index: 60; }
.ds-toc-pop[hidden] { display: none; }
.ds-toc-pop h4 { margin: 0 0 8px; font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-sm); color: var(--ink); }
.ds-toc-pop a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; }
.ds-toc-pop a:hover { background: var(--bg-soft); color: var(--accent); }
.ds-toc-pop .ds-toc-lv3 { padding-left: 20px; font-size: var(--fs-xs); color: var(--muted); }
/* 分享浮层（dsShare 点击展开：阅读数 + 三渠道；参照 .ds-toc-pop 范式，令牌化·零写死） */
.ds-share-pop { position: fixed; left: 50%; transform: translateX(-50%); top: 96px; width: min(280px, 88vw); background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); padding: 14px; z-index: 60; }
.ds-share-pop[hidden] { display: none; }
.ds-share-views { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 10px; text-align: center; }
.ds-share-views b { color: var(--accent); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.ds-share-channels { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ds-share-btn { padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s, background .15s; }
.ds-share-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
/* 折叠：窄屏隐藏浮动侧栏，正文铺满（右栏内嵌详情上下文不受影响） */
@media (max-width: 920px) {
  body:not([data-rightmode="detail"]) .detail-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  body:not([data-rightmode="detail"]) .detail-side { display: none; }
}

/* ===== 分页增强 ===== */
.pagination .sj-page-prev, .pagination .sj-page-next { padding: 0 12px; }
.pagination .disabled { opacity: .5; pointer-events: none; border-style: dashed; }
.pagination .sj-page-ellipsis { min-width: 24px; border: none; color: var(--faint); }
.pagination .sj-page-info { min-width: auto; border: none; color: var(--muted); font-size: var(--fs-xs); align-self: center; margin-left: 4px; }

/* ===== 侧栏小工具（render_sidebar 输出） ===== */
.sj-widget { background: var(--card-bg); border: none; border-radius: var(--radius-widget, 12px); padding: var(--spacing-md); margin-bottom: var(--spacing-md); }  /* v19.20.9b：去边框（用户原话".sj-widget不要边框"）；其余对齐原型右栏 .lt-mini：12px 圆角 + 紧凑堆叠（gap≈14px） */
.sj-widget-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 1px; margin: 0 0 var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--line); }  /* 对齐原型右栏标题语言（.rh-title/.ei-kicker）：小字距 + 细分隔线，区别于主区 .sj-section-title 的朱砂竖条 */
.sj-widget-body { font-size: var(--fs-sm); }
.sj-widget-empty { color: var(--muted); margin: 0; font-size: var(--fs-sm); }

.sj-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sj-mini-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.sj-mini-item:last-child { border-bottom: none; }
.sj-mini-item a { color: var(--ink); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-mini-item a:hover { color: var(--accent); text-decoration: none; }
.sj-mini-meta { color: var(--faint); font-size: var(--fs-xs); flex: 0 0 auto; }

.sj-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sj-cat-list li a { display: inline-block; padding: 4px 11px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); }
.sj-cat-list li a:hover { color: var(--accent); text-decoration: none; }
.sj-cat-list li.active a { background: var(--accent); color: var(--on-accent); }


/* 相关推荐 · tab（分类相关 / 朝代相关 / 名称相关）— 纯前端切换，令牌化·零写死·守禁六 */
.sj-rel-tabs { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.sj-rel-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.sj-rel-tab { flex: 1 1 0; margin: 0 0 -1px; padding: 7px 4px; border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: var(--fs-xs); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.sj-rel-tab:hover { color: var(--ink); }
.sj-rel-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.sj-rel-panel { display: none; }
.sj-rel-panel.is-active { display: block; }

/* ===== 详情页：标签 / 分享 / 相关 / 上下篇 ===== */
.sj-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--spacing-md) 0; }
.sj-tag-pill { display: inline-block; padding: 3px 12px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); }
.sj-tag-pill:hover { color: var(--accent); text-decoration: none; }

.sj-share { display: flex; align-items: center; gap: 8px; margin: var(--spacing-md) 0; flex-wrap: wrap; }
.sj-share-label { font-size: var(--fs-sm); color: var(--muted); }
.sj-share-btn { padding: 5px 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; }
.sj-share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 相关推荐 · 图右内容横向列表（有封面显缩略图在右、无封面文字自适应占满，令牌化零写死·守禁六）
   注：本列表（.sj-rel-list/.sj-rel-item/.sj-rel-link/.sj-rel-text/.sj-rel-type/.sj-rel-title/.sj-rel-excerpt/.sj-rel-thumb）
   由 _widgets.php 详情页右栏"相关推荐"tab 面板渲染（_sj_rel_list 在 _render.php）；正文底部相关推荐块已于 v19.20.7 删除。 */
.sj-rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sj-rel-item { border-bottom: 1px solid var(--line); }
.sj-rel-item:last-child { border-bottom: none; }
.sj-rel-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) 0; color: var(--ink); }
.sj-rel-link:hover { text-decoration: none; }
.sj-rel-link:hover .sj-rel-title { color: var(--accent); }
.sj-rel-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sj-rel-type { align-self: flex-start; font-size: var(--fs-xs); padding: 1px 9px; border-radius: var(--radius-full); background: var(--accent-weak); color: var(--accent); line-height: 1.7; }
.sj-rel-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.sj-rel-excerpt { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sj-rel-thumb { flex: 0 0 auto; width: 96px; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); }
.sj-rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sj-pager-detail { display: flex; justify-content: space-between; gap: 12px; margin: var(--spacing-xl) 0; flex-wrap: wrap; }
.sj-pager-detail a { flex: 1 1 0; min-width: 140px; padding: var(--spacing-md); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.sj-pager-detail a:hover { border-color: var(--accent); text-decoration: none; }
.sj-pager-detail .dir { font-size: var(--fs-xs); color: var(--faint); }
.sj-pager-detail .tt { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-pager-detail .sj-next { text-align: right; align-items: flex-end; }

/* 版权声明（port 自 candy .detail-copyright；开关走 setting('show_copyright')，站点级声明走 setting('site_copyright')；令牌化·零写死） */
.sj-copyright { display: flex; align-items: flex-start; gap: 10px; margin: var(--spacing-lg) 0; padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sj-cp-ic { flex: 0 0 auto; margin-top: 2px; color: var(--muted); }
.sj-cp-text { min-width: 0; }
.sj-cp-main { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.sj-cp-site { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--faint); line-height: 1.6; }

/* ===== 评论 ===== */
.sj-comments { margin-top: var(--spacing-xl); }
.sj-comment-list { list-style: none; margin: var(--spacing-md) 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }
.sj-comment { display: flex; gap: 12px; }
.sj-comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); flex: 0 0 auto; }
.sj-comment-body { flex: 1 1 auto; min-width: 0; }
.sj-comment-head { display: flex; align-items: baseline; gap: 8px; }
.sj-comment-name { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.sj-comment-time { font-size: var(--fs-xs); color: var(--faint); }
.sj-comment-text { color: var(--ink); font-size: var(--fs-sm); line-height: 1.7; margin: 4px 0; word-break: break-word; }
.sj-comment-reply { background: none; border: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; padding: 0; font-family: inherit; }
.sj-comment-reply:hover { color: var(--accent); }
.sj-comment-children { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0 0 0 var(--spacing-lg); border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.sj-comment-form { margin-top: var(--spacing-md); }
.sj-comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); background: var(--card-bg); resize: vertical; box-sizing: border-box; }
.sj-comment-form textarea:focus { outline: none; border-color: var(--accent); }
.sj-comment-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.sj-comment-login { color: var(--muted); font-size: var(--fs-sm); }
.sj-comment-login a { color: var(--accent); }
.sj-comment-pending { opacity: .7; }
.sj-comment-pending .sj-comment-name { color: var(--accent); }

/* ===== 加载更多（卡片瀑布流 / 评论区，AJAX 接管·守禁六 token 化）===== */
.sj-load-more {
  display: flex; width: fit-content; align-items: center; justify-content: center; gap: 8px;
  margin: var(--spacing-lg) auto 0; padding: 10px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-pill, 999px);
  background: var(--card-bg); color: var(--muted);
  font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sj-load-more:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sj-load-more:disabled { cursor: default; color: var(--faint); }
.sj-load-more:disabled::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: sj-spin .7s linear infinite;
}
@keyframes sj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sj-load-more:disabled::before { animation: none; } }
.sj-comment-load-more-wrap { display: flex; justify-content: center; margin: var(--spacing-md) 0; }
.sj-load-sentinel { width: 100%; height: 1px; }

/* ===== 文内链接 → 右栏即时预览（详情页增强：点击 .sj-prose a 右栏展示目标内容） ===== */
.sj-preview {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--card-bg, #fff);
  border-radius: var(--radius-widget, 12px);
  overflow: hidden;
}
.sj-preview[hidden] { display: none; }

/* ===== preview 独占右栏视野（点击文内链接后，原 sidebar widget 让位） ===== */
/* 现代浏览器：:has() 选父容器内非 preview 兄弟并隐藏（让 preview 真正覆盖 widget） */
.sj-right-inner:has(.sj-preview:not([hidden])) > :not(.sj-preview) { display: none; }
.sj-right-inner:has(.sj-preview:not([hidden])) .sj-preview { flex: 1 1 auto; height: auto; min-height: 100%; }
/* 旧浏览器兜底：JS 在 .sj-right-inner 上加 data-preview-on="1" 时同样生效 */
.sj-right-inner[data-preview-on="1"] > :not(.sj-preview) { display: none; }
.sj-right-inner[data-preview-on="1"] .sj-preview { flex: 1 1 auto; height: auto; min-height: 100%; }
/* 注：.sj-preview[hidden] { display: none } 在上方已定义；openTermPreview 解除 hidden 后，
   上述两条让 preview 占据 .sj-right-inner 全部视野，原 sidebar widget 让位 */
.sj-pv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft, #faf9f7);
  flex: 0 0 auto;
}
.sj-pv-back {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: var(--fs-sm); font-family: inherit;
  padding: 2px 4px;
}
.sj-pv-back:hover { color: var(--accent); }
.sj-pv-label {
  font-size: var(--fs-xs); color: var(--on-accent, #fff);
  padding: 2px 10px; border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.sj-pv-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.sj-pv-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); line-height: 1.4; }
.sj-pv-meta { display: flex; gap: 10px; color: var(--faint); font-size: var(--fs-xs); flex-wrap: wrap; }
.sj-pv-meta .sep { opacity: .4; }
.sj-pv-hero { border-radius: var(--radius, 10px); overflow: hidden; background: var(--bg-soft); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.sj-pv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sj-pv-hero.is-char { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: 44px; color: var(--accent); background: var(--accent-weak, #fbefec); }
.sj-pv-excerpt { font-size: var(--fs-sm); color: var(--ink-2, #6e6c64); line-height: 1.8; margin: 0; }
/* 来源出处（点击文内链接后右栏预览卡内展示；仅接口返回 source/author/dynasty 时渲染） */
.sj-pv-source { display: flex; gap: 8px; align-items: flex-start; background: var(--bg-soft, #faf9f7); border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 10px 12px; }
.sj-pv-source-k { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--on-accent, #fff); background: var(--accent); padding: 2px 8px; border-radius: var(--radius-pill, 999px); line-height: 1.6; white-space: nowrap; }
.sj-pv-source-b { min-width: 0; }
.sj-pv-source-main { margin: 0; font-size: var(--fs-sm); color: var(--ink); line-height: 1.7; }
/* 释文出处可点击（接口返回 desc_source_url 时渲染为链接） */
a.sj-pv-source-main { color: var(--accent); text-decoration: none; }
a.sj-pv-source-main:hover { text-decoration: underline; }
.sj-pv-source-sub { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.sj-pv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sj-pv-tag { font-size: var(--fs-xs); color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); padding: 2px 10px; }
.sj-pv-acts { margin-top: 2px; }
.sj-pv-go {
  display: inline-block; padding: 8px 18px;
  border: 1px solid var(--accent); border-radius: var(--radius-pill, 999px);
  color: var(--accent); font-size: var(--fs-sm); text-decoration: none;
  transition: background .15s, color .15s;
}
.sj-pv-go:hover { background: var(--accent); color: var(--on-accent, #fff); text-decoration: none; }
.sj-pv-comments { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.sj-pv-comments h4 { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.sj-pv-cmt { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.sj-pv-cmt b { color: var(--ink-2); font-weight: 600; margin-right: 6px; }
.sj-pv-cmt p { margin: 2px 0 0; }
.sj-pv-loading, .sj-pv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 16px;
  color: var(--faint); font-size: var(--fs-sm);
  text-align: center;
}

/* 正文术语高亮（点击 → 右栏展开，不跳术语页/不弹 modal） */
.term-word {
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted var(--accent);
  transition: background .15s ease;
}
.term-word:hover { background: var(--accent-weak); }

/* 右栏术语卡：参考文献 + 相关词条/内容（复用 .sj-pv-* 体系，零写死） */
.sj-pv-term-ref { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.sj-pv-term-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sj-pv-term-rel h4 { flex: 0 0 100%; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); font-family: var(--font-heading, "Noto Serif SC", serif); }
.sj-pv-term-chip {
  font-size: var(--fs-xs); color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill, 999px);
  padding: 3px 11px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sj-pv-term-chip:hover { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
/* v19.20.8：术语 tab 内的 chips 包裹（原独立块靠 .sj-pv-term-rel 横排，现并入 .sj-rel-panel 需自带 flex） */
.sj-pv-term-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* v19.20.9 清理：原 .sj-pv-term-link/.sj-pv-term-link-wrap/.sj-pv-rel-src/.sj-pv-term-link--{key} 全部死代码（v19.20.9 内容改 .sj-rel-list/.sj-rel-link）——守禁五·死开关清理 */
/* 各类型 token 配色迁移到 .sj-rel-type--{key}（弹窗内容列表项的类型标签与 _widgets.php 右栏"相关推荐"同款派生——守禁三·单一事实源） */
.sj-rel-type--encyclopedia { color: var(--t-encyclopedia); background: var(--t-encyclopedia-bg, var(--accent-weak)); }
.sj-rel-type--article      { color: var(--t-article);      background: var(--t-article-bg,      var(--accent-weak)); }
.sj-rel-type--album        { color: var(--t-album);        background: var(--t-album-bg,        var(--accent-weak)); }
.sj-rel-type--library      { color: var(--t-library);      background: var(--t-library-bg,      var(--accent-weak)); }
/* v19.20.6：tab 文本带计数 chip（5-tab 栏每个 tab 后面带 N）；v19.20.9 复用 */
.sj-rel-tab-cnt {
  display: inline-block;
  margin-left: 3px;
  font-size: calc(var(--fs-xs) - 1px);
  opacity: 0.65;
  font-weight: 400;
}
/* v19.20.9：术语弹窗 4 内容类型 panel 内空态/全空兜底（直接挂在 .sj-pv-rel-empty-tip，无外层 .sj-pv-term-rel-empty 嵌套时也生效） */
.sj-pv-rel-empty-tip { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; font-style: normal; margin: 4px 0; }
.sj-pv-term-rel-empty .sj-pv-rel-empty-tip { flex: 0 0 100%; }

/* 详情标题（v19.20.3f：选择器升级到 h1.detail-title，特异性 (0,1,1) 全站最高 ——
   防御任何外部样式/缓存副本（含浏览器 SW/CDN 中的旧 .detail-title 27px 规则）压住 v19.20.3d 的 40px/28px。
   字号 calc(var(--fs-xl) + 20px) = 40px；标题到 meta 间距 calc(var(--spacing-md) + 12px) = 28px） */
h1.detail-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: 24px; font-weight: 700; margin: 10px 0; line-height: 1.3; }

/* ===== 标注 / 笔记 / 朗读 已迁到快捷导航侧栏（见 .detail-side 与 #dsAnno/#dsNote/#dsTts）=====
   原正文底部 .detail-tools / .dt-btn 已下线（守禁五·死开关清理） */

/* 标注模式态 + 标注高亮（仍由侧栏 dsAnno 触发；样式靠 token） */
.sj-prose.sj-annotating { cursor: text; background: var(--accent-weak); border-radius: var(--radius); }
mark.sj-hl { background: var(--accent-weak); color: inherit; border-radius: 3px; padding: 0 2px; cursor: pointer; }

/* ===== 图片灯箱样式已迁移至 imgmodal.css（参考 candy 相册弹窗） ===== */

/* ===== 笔记侧栏（localStorage，纯前端） ===== */
.sj-notes { position: fixed; top: 0; right: 0; height: 100vh; width: var(--sujian-right-w); max-width: 86vw; background: var(--card-bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg, 0 16px 48px rgba(31,30,27,.18)); transform: translateX(100%); transition: transform .25s ease; z-index: 9997; display: flex; flex-direction: column; }
.sj-notes.open { transform: translateX(0); }
.sj-notes-head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); border-bottom: 1px solid var(--line); font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); }
.sj-notes-x { border: none; background: none; color: var(--faint); font-size: 22px; line-height: 1; cursor: pointer; }
.sj-notes-x:hover { color: var(--accent); }
.sj-notes-body { flex: 1 1 auto; overflow-y: auto; padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.sj-note-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 28px 10px 12px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.6; position: relative; }
.sj-note-item .sj-note-del { position: absolute; top: 6px; right: 8px; border: none; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; }
.sj-note-item .sj-note-del:hover { color: var(--accent); }
.sj-notes-empty { color: var(--muted); font-size: var(--fs-sm); text-align: center; padding: var(--spacing-xl) 0; margin: 0; }
.sj-notes-foot { padding: var(--spacing-md); border-top: 1px solid var(--line); }
.sj-notes-foot textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); background: var(--card-bg); resize: vertical; box-sizing: border-box; }
.sj-notes-foot textarea:focus { outline: none; border-color: var(--accent); }
.sj-notes-add { margin-top: 8px; width: 100%; }

/* ============================================================
   特殊视图（时间轴 / 搜索 / 标签 / 朝代 / 术语 / 专题 / 动态 / 收藏 / 相册 / 博物馆 / 知识图谱 / 对比 / AI）
   颜色 / 圆角 / 间距一律走 --token（守禁六）。
   ============================================================ */
.sj-list-sub { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 0; line-height: 1.6; }
.sj-inline-search { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }  /* 父容器 min-width:0 防止 input 推爆按钮 */
.sj-inline-input { border: 1px solid var(--line); border-radius: var(--radius-full); padding: 7px 14px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); background: var(--card-bg); min-width: 180px; flex: 0 1 240px; transition: border-color .15s, box-shadow .15s; }
.sj-inline-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
.sj-inline-go { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-full); padding: 7px 18px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 80px; justify-content: center; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; }
.sj-inline-go:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.sj-inline-go:active { transform: scale(0.97); }
.sj-inline-go::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }  /* 搜索图标：CSS mask + currentColor 继承（按钮文字「搜索」由 PHP 输出） */

/* ---------- 时间轴：双轨对照（中国朝代 / 西方时期） ---------- */
.tl-ctrl {
  display: flex; flex-wrap: wrap; gap: var(--spacing-sm);
  align-items: center; justify-content: space-between;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  padding: 0 0 var(--spacing-sm);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: var(--card-bg);
}
.tl-ctrl-group { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.tl-ctrl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--bg-main);
  color: var(--muted);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: var(--font-body, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.tl-ctrl-btn .ic { width: 14px; height: 14px; flex-shrink: 0; }
.tl-ctrl-btn:hover { color: var(--accent); border-color: var(--accent); }
.tl-ctrl-btn.active { color: var(--on-accent); background: var(--ink); border-color: var(--ink); font-weight: 600; }  /* 对齐原型 .pagebar 选中态：墨底白字加粗（.ftab.on） */

.tl-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
  margin-top: 0;               /* 2026-08-29 去掉顶层边距（原型无此层）；顶距现由 .tl-container 24px 提供，对齐原型 .timeline */
}
.tl-rail-col { min-width: 0; }
.tl-rail-col.is-hidden { display: none; }
.tl-rail-h {
  font-family: var(--font-heading, "Noto Serif SC", serif);
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 2px;
  margin: 0 0 var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--line);
}
.tl-rail-h.is-active-side { color: var(--accent); }
.tl-axis { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-axis::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-era { position: relative; padding: 0 0 var(--spacing-md) 28px; }
.tl-era[hidden] { display: none !important; }   /* 数量上限折叠：JS 加 hidden 属性，防御内联样式覆盖 */
.tl-era-dot {
  position: absolute; left: 1px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--card-bg); border: 2px solid var(--line);
  cursor: pointer; z-index: 2;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.tl-era-dot:hover { transform: scale(1.2); border-color: var(--line-hover); }
.tl-era.active .tl-era-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-weak); }
.tl-era-name {
  font-family: var(--font-heading, "Noto Serif SC", serif);
  font-size: var(--fs-era, 22px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--spacing-sm);
}
.tl-era-items { display: grid; grid-template-columns: repeat(var(--tl-era-cols, 6), minmax(0, 1fr)); gap: var(--spacing-md); }  /* 列数 token 化（守禁六）；默认 6 列，桌面右栏展开降为 5 列（守用户明确要求 默认6/右栏5） */
.tl-era-empty { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.tl-rail-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--spacing-sm) 0 0 28px; padding: 6px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-full);
  background: var(--card-bg); color: var(--accent);
  font-family: var(--font-body, inherit); font-size: var(--fs-sm); cursor: pointer; line-height: 1.4;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.tl-rail-more-btn:hover { border-color: var(--accent); background: var(--accent-weak); }
.tl-rail-more-btn[aria-expanded="true"] { color: var(--muted); }
.tl-item { margin: 0; }

/* ===== 时间轴子分类（node=朝代/时期 → subs=子分期 → 内容；照搬原型，默认全展开） ===== */
.tl-era-name { cursor: pointer; user-select: none; }

/* 子分类容器 */
.tl-subs { margin-top: var(--spacing-sm); }
.tl-era-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spacing-md); }
.tl-echip {
  border: 1px solid var(--line); background: var(--card-bg); color: var(--muted);
  border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--fs-sm);
  font-family: var(--font-body, inherit); cursor: pointer; line-height: 1.4;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.tl-echip:hover { border-color: var(--accent); color: var(--accent); }
.tl-echip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.tl-sub-blocks { display: flex; flex-direction: column; gap: var(--spacing-md); }
.tl-sub-block { position: relative; }
.tl-sb-head {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-heading, "Noto Serif SC", serif);
  margin: 0 0 var(--spacing-sm); padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.tl-sb-head b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 1px; }
.tl-sb-head em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.tl-sub-empty { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--spacing-sm); }

/* 单轨：仅显示选中一轨，占满整列（另一轨由 JS 加 .is-hidden） */
.tl-dual[data-track="single"] { grid-template-columns: 1fr; }
/* 双轨 - 上下叠放 */
.tl-dual[data-layout="stack"] { grid-template-columns: 1fr; gap: 0; }
.tl-dual[data-layout="stack"] .tl-rail-col { margin-bottom: var(--spacing-xl); }
/* 控制条：按轨道模式显示对应子组（双轨布局 / 单轨选择 互斥） */
.tl-ctrl[data-track="single"] .tl-ctrl-group[data-for="dual"] { display: none; }
.tl-ctrl[data-track="dual"] .tl-ctrl-group[data-for="single"] { display: none; }

/* 视图：网格 → era 内容改为网格排布（同样走 --tl-era-cols，固定列数） */
.tl-dual[data-view="grid"] .tl-era-items { display: grid; grid-template-columns: repeat(var(--tl-era-cols, 6), minmax(0, 1fr)); gap: var(--spacing-md); }  /* 网格视图：默认 6 列，桌面右栏展开降 5（同基础规则） */
/* 双轨模式：每轨 3 列（视觉共 6，避免半宽挤压） */
.tl-dual[data-track="dual"] .tl-era-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 仅桌面（≥1280px）右栏展开(expanded)挤占主区 → 单轨 6→5 列（守用户明确要求 默认6/右栏5）；平板/移动右栏为浮层不挤主区，不降列 */
@media (min-width: 1280px) {
  #sjThreeCol[data-right="expanded"] .tl-era-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #sjThreeCol[data-right="expanded"] .tl-dual[data-view="grid"] .tl-era-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #sjThreeCol[data-right="expanded"] .tl-dual[data-track="dual"] .tl-era-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 双轨半宽挤不下 5 列，保持每轨 3 */
}
/* 时间轴主网格响应式兜底：窄屏降列，避免固定列数在小屏过挤 */
@media (max-width: 960px) {
  .tl-era-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-dual[data-view="grid"] .tl-era-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tl-era-items { grid-template-columns: 1fr; }
  .tl-dual[data-view="grid"] .tl-era-items { grid-template-columns: 1fr; }
}

/* ---------- 搜索结果页 ----------
   注：外层类名 .sj-search-page 是有意避开 layout.css:244 全局 .sj-search
   （导航栏胶囊，display:flex + radius-full），避免被误命中同款样式。
   全 token、不写死。*/
.sj-search-page { display: block; margin-top: var(--spacing-lg); }
.sj-search-head { margin-bottom: var(--spacing-md); }
.sj-search-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
/* 顶部搜索框 + 类型芯片（同一卡片） */
.sj-search-bar { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); box-shadow: var(--shadow); }
.sj-search-bar .sj-search-form { position: relative; max-width: 100%; margin-bottom: var(--spacing-sm); }
/* 双栏布局：主栏结果 + 侧栏辅助 */
.sj-search-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-xl); align-items: start; }
.sj-search-main { min-width: 0; }   /* grid 子项内含 overflow，圆角卡需 min-width:0 避免撑破容器 */
.sj-search-side { display: flex; flex-direction: column; gap: var(--spacing-md); position: sticky; top: var(--spacing-md); }   /* 侧栏滚动跟随主栏（不能全屏滚） */
/* 窄屏双栏变单列 */
@media (max-width: 900px) {
  .sj-search-body { grid-template-columns: 1fr; }
  .sj-search-side { position: static; }
}
@media (max-width: 900px) {
  .sj-search-side { order: -1; }   /* 窄屏：侧栏前置，避免压在结果下方看不见 */
}
.sj-search-side-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-md); }
.sj-search-side-h { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); margin: 0 0 var(--spacing-sm); padding: 0; border: none; color: var(--ink); }
.sj-search-side-h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-sm); }
.sj-search-side-empty { color: var(--faint); font-size: var(--fs-xs); margin: 0; }
/* v19.20.17：统一成首页 .home-search 同款"无框透明"搜索框（用户原话「统一成首页的这种搜索框」）
   形态特征：无背景、无边框、无圆角、SVG icon 绝对定位在右端、input 留 padding-right 让位图标、
   hover/focus 反馈仅 SVG icon 变 accent 色（不靠 border/box-shadow，符合素笺纸面感）。
   影响范围：左栏、搜索页（_special.php）等所有带 .sj-search-field 类的搜索框。 */
.sj-search-field { display: flex; align-items: center; gap: 8px; background: var(--bg-left); border: 0; border-radius: 0; padding: 8px 10px; position: relative; transition: color var(--transition-fast); cursor: text; }
.sj-search-field:hover, .sj-search-field:focus-within { /* 无外框态：仅 SVG icon 变 accent 作聚焦反馈 */ }
.sj-search-field:hover .sj-search-ico, .sj-search-field:focus-within .sj-search-ico { color: var(--accent); transition: color var(--transition-fast); }
.sj-search-ico { color: var(--ink-3); flex-shrink: 0; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
/* v19.20.16→v19.20.17：原 order:2 改为绝对定位（v19.20.17 视觉对齐 .home-search 的 icon 绝对定位方案） */
.sj-search-input { flex: 1; min-width: 0; border: none; background: var(--bg-left); outline: none; padding: 4px 40px 4px 4px; font-size: var(--fs-sm); font-family: inherit; color: var(--ink); appearance: none; -webkit-appearance: none; }   /* v19.20.21：padding-right 40px = icon right 18px + icon 14px + 8px 留白，防图标压字 */
.sj-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }   /* 去掉原生清除 X */
.sj-search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.sj-search-go { flex-shrink: 0; border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-full); padding: 9px 22px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; }
.sj-search-go:hover { background: var(--accent-dark); }
/* 实时联想下拉（复用 /api/content_search.php?action=suggest） */
.sj-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 6px; z-index: 50; max-height: 360px; overflow: auto; }
.sj-suggest[hidden] { display: none; }
.sj-suggest-group { padding: 2px 0; }
.sj-suggest-gt { font-size: var(--fs-xs); color: var(--faint); padding: 6px 10px 2px; }
.sj-suggest-item { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); text-decoration: none; }
.sj-suggest-item:hover, .sj-suggest-item.active { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
/* 搜索词高亮：搜索列表标题/摘要 + 详情页正文区，统一样式（取详情页更醒目的样式，含 font-weight:600） */
mark.sj-kw-hl, .sj-search mark { background: var(--accent-weak); color: var(--ink); border-radius: 3px; padding: 0 2px; font-weight: 600; }
/* v19.5 搜索结果横排列表（图左文右，参考用户截图布局）。放弃 .card-grid 网格，纵向堆叠每条结果，阅读节奏更稳 */
.sj-search-list { display: flex; flex-direction: column; gap: var(--spacing-md); }
.sj-list-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--spacing-md); padding: var(--spacing-md); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow .15s, transform .15s, border-color .15s; }
.sj-list-card:hover { box-shadow: var(--shadow); border-color: var(--line-hover); transform: translateY(-1px); }
.sj-list-card-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-soft); }
.sj-list-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 无封面卡片：封面列不渲染，正文占满整行（specificity 高于 .sj-list-card，窄屏 120px 1fr 规则亦被覆盖） */
.sj-list-card.no-cover { grid-template-columns: 1fr; }
.sj-list-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sj-list-card-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-lg); line-height: 1.4; margin: 0; font-weight: 600; }
.sj-list-card-title a { color: var(--ink); }
.sj-list-card-title a:hover { color: var(--accent); text-decoration: none; }
.sj-list-card-excerpt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sj-list-card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--spacing-sm); flex-wrap: wrap; }
.sj-list-card-foot .cf-tag { flex-shrink: 0; }
.sj-list-card-cat { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .sj-list-card { grid-template-columns: 120px minmax(0, 1fr); gap: var(--spacing-sm); padding: var(--spacing-sm); }
  .sj-list-card-title { font-size: var(--fs-md); }
  .sj-list-card-excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
}
.sj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--spacing-md) 0 var(--spacing-lg); }
.sj-chip { padding: 5px 16px; border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--line); }
.sj-chip:hover, .sj-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-weak); text-decoration: none; }
/* 类型命中数量（对齐 candy 类型 pill 带 cnt，全 token） */
.sj-chip-cnt { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-full); font-size: var(--fs-xs); line-height: 18px; text-align: center; color: var(--faint); background: var(--bg-soft); }
.sj-chip.active .sj-chip-cnt { color: var(--on-accent, #fff); background: var(--accent); }
.sj-search-hint { color: var(--muted); font-size: var(--fs-sm); }
.sj-search-group { margin-bottom: var(--spacing-xl); }
.sj-search-group-h { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); margin: 0 0 var(--spacing-md); }
.sj-search-count { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
/* 热门搜索 + 搜索历史（localStorage） */
.sj-search-hot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: var(--spacing-sm) 0 var(--spacing-md); }
.sj-search-hot-label { font-size: var(--fs-sm); color: var(--muted); flex-shrink: 0; }
.sj-search-hot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-search-hist { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sj-search-hist-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-hist-item { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px 3px 14px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); cursor: pointer; }
.sj-hist-item:hover { color: var(--accent); }
.sj-hist-del { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.sj-hist-del:hover { color: var(--accent); }
.sj-search-hist-clear { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: var(--fs-xs); text-decoration: underline; margin-left: 4px; }
.sj-search-hist-clear[hidden] { display: none; }
/* 热门搜索榜（对齐 candy 热门搜索：排名+次数，全 token） */
.sj-hot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sj-hot-item { margin: 0; }
.sj-hot-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-md); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; transition: background .15s, color .15s; }
.sj-hot-link:hover { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
.sj-hot-rank { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-heading, "Noto Serif SC", serif); color: var(--muted); background: var(--bg-soft); }
.sj-hot-rank.top { color: var(--on-accent, #fff); background: var(--accent); }   /* Top3 高亮 */
.sj-hot-kw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-hot-cnt { flex-shrink: 0; font-size: var(--fs-xs); color: var(--faint); }
/* 相关搜索（空结果态） */
.sj-search-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--spacing-md); }
.sj-search-related > span { color: var(--muted); font-size: var(--fs-sm); }
/* 分页 */
.sj-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: var(--spacing-xl) 0; }
.sj-pager a { padding: 8px 20px; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--ink); font-size: var(--fs-sm); text-decoration: none; }
.sj-pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.sj-pager-cur { color: var(--muted); font-size: var(--fs-sm); }
/* 跳页表单（对齐 candy pager-jump，GET 提交，无内联 JS，全 token） */
.sj-page-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--spacing-sm); color: var(--muted); font-size: var(--fs-sm); }
.sj-page-jump-lbl { display: inline-flex; align-items: center; gap: 4px; }
.sj-page-jump-in { width: 56px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-soft); color: var(--ink); font-size: var(--fs-sm); font-family: inherit; text-align: center; }
.sj-page-jump-in:focus { outline: none; border-color: var(--accent); }
.sj-page-go { border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); color: var(--ink); padding: 6px 16px; cursor: pointer; font-size: var(--fs-sm); font-family: inherit; }
.sj-page-go:hover { border-color: var(--accent); color: var(--accent); }
/* 无结果兜底"大家都在看"推荐区（复用 .sj-search-group，仅加轻量区分，不写死） */
.sj-search-rec .sj-search-group-h { color: var(--accent); }
/* 聚合筛选中心（_sj_view_filter）：关键词 + 排序条，复用 token 不写死 */
.sj-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--spacing-md) 0 var(--spacing-lg); }
.sj-filter-bar .sj-search-input { flex: 1 1 260px; }
.sj-list-meta { color: var(--muted); font-size: var(--fs-sm); margin: var(--spacing-md) 0 var(--spacing-sm); }
.sj-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sj-tag-pill { display: inline-block; padding: 4px 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); }
.sj-tag-pill:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.sj-tag-dyn { background: var(--accent-weak); border-color: transparent; color: var(--accent); }

/* ---------- 朝代库 ---------- */
.sj-dynasty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.sj-dynasty { display: flex; flex-direction: column; gap: 6px; padding: var(--spacing-sm); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.sj-dynasty:hover { box-shadow: var(--shadow, 0 1px 2px rgba(31,30,27,.03), 0 8px 24px rgba(31,30,27,.05)); transform: translateY(-2px); text-decoration: none; }
.sj-dynasty-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.sj-dynasty-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); }
.sj-dynasty-desc { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 动态广场 ---------- */
.sj-feed { list-style: none; margin: var(--spacing-lg) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sj-feed-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.sj-feed-type { flex: none; }
.sj-feed-title { color: var(--ink); font-size: var(--fs-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-feed-title:hover { color: var(--accent); text-decoration: none; }
.sj-feed-time { color: var(--muted); font-size: var(--fs-xs); flex: none; }

/* ---------- 收藏卡片 ---------- */
.sj-fav-card { position: relative; }
.sj-fav-remove { margin-top: var(--spacing-sm); border: 1px solid var(--line); background: var(--card-bg); color: var(--muted); border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--fs-xs); cursor: pointer; font-family: inherit; }
.sj-fav-remove:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 相册时光长廊（瀑布流） ---------- */
.sj-masonry { columns: var(--album-tl-cols, 6); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.sj-masonry-item { display: block; break-inside: avoid; margin-bottom: var(--spacing-md); border-radius: var(--radius-lg); overflow: hidden; position: relative; border: 1px solid var(--line); }
.sj-masonry-item img { width: 100%; display: block; }
.sj-masonry-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 10px; font-size: var(--fs-sm); color: var(--on-accent); background: linear-gradient(transparent, var(--overlay-dark)); }
.sj-masonry-item:hover { text-decoration: none; }

/* 相册时光长廊：固定列数，随视口收窄（列数由 --album-tl-cols 统一控制） */
@media (max-width: 1280px) { :root { --album-tl-cols: 4; } }
@media (max-width: 980px)  { :root { --album-tl-cols: 3; } }
@media (max-width: 720px)  { :root { --album-tl-cols: 2; } }
@media (max-width: 480px)  { :root { --album-tl-cols: 1; } }

/* ---------- 知识图谱 / 标签云 ---------- */
.sj-kg-block { margin-top: var(--spacing-xl); }
.sj-kg-h { font-size: var(--fs-md); }

/* ---------- 对比 ---------- */
.sj-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.sj-compare-col { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-md); }
.sj-compare-title { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); display: block; margin-bottom: 8px; }
.sj-compare-title:hover { color: var(--accent); text-decoration: none; }
.sj-compare-cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: 10px; }
.sj-compare-body { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- AI 功能 ---------- */
.sj-ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.sj-ai-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: flex; flex-direction: column; gap: 8px; }
.sj-ai-icon { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-weak); }
.sj-ai-name { font-family: var(--font-heading, "Noto Serif SC", serif); font-size: var(--fs-md); color: var(--ink); margin: 0; }
.sj-ai-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; flex: 1; }
.sj-ai-go { color: var(--accent); font-size: var(--fs-sm); }
.sj-ai-go:hover { text-decoration: none; }


@media (max-width: 1024px) {
  .tl-dual { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .tl-ctrl { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .sj-compare { grid-template-columns: 1fr; }
}













/* ===== Toast（原 sujian.js 内联 cssText 抽离，守禁六·零写死，2026-08-29） ===== */
.sj-toast {
  position: fixed; left: 50%; bottom: var(--toast-bottom);
  transform: translateX(-50%);
  background: var(--toast-bg); color: var(--on-accent);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  z-index: 9999; max-width: 80vw;
}

/* ===== 骨架屏（加载态；token 化，prefers-reduced-motion 关闭 shimmer，守禁六零写死） ===== */
.sj-skeleton {
  --sk-bg: var(--bg-soft);
  --sk-shine: var(--accent-weak);
  position: relative; overflow: hidden;
  background: var(--sk-bg); border-radius: var(--radius);
}
.sj-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  animation: sj-shimmer 1.2s infinite;
}
@keyframes sj-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sj-skeleton::after { animation: none; } }
.sj-skeleton--text { height: .85em; border-radius: var(--radius-sm); margin: .4em 0; }
.sj-skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
.sj-skeleton--media { width: 100%; aspect-ratio: 3 / 2; }
.sj-skeleton--block { height: 220px; }

/* 列表 / 卡片骨架占位（可复用：灯箱媒体外，列表加载态亦可复用 .sj-skeleton 词汇） */
.sj-skeleton--card { width: 100%; aspect-ratio: 3 / 4; }
.sj-skeleton--line { width: 100%; height: .8em; border-radius: var(--radius-sm); margin: .5em 0; }
.sj-skeleton--line.short { width: 60%; }

/* 页面级导航骨架（命中站内链接时短暂呈现，提供加载态反馈；非死类：由 sujian.js 真实消费每次站内导航） */
.sj-page-loading {
  position: fixed; inset: 0; z-index: 9995;
  background: var(--bg-main);
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(var(--sj-nav-h, 56px) + 24px) var(--spacing-lg) var(--spacing-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease;
}
.sj-page-loading.show { opacity: 1; visibility: visible; pointer-events: auto; }
.sj-page-loading .sj-pl-bar { max-width: var(--container-max); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.sj-page-loading .sj-pl-row { display: flex; gap: 14px; align-items: center; }
.sj-page-loading .sj-pl-thumb { width: 96px; height: 96px; flex: 0 0 auto; }
.sj-page-loading .sj-pl-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .sj-page-loading { transition: none; } }

/* ===== 回到顶部（框架级；token 化，.show 显隐，reduce-motion 关过渡） ===== */
.sj-totop {
  position: fixed; right: 20px; bottom: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--accent);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 9990;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease;
  box-shadow: var(--shadow, 0 2px 8px rgba(31,30,27,.12));
}
.sj-totop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sj-totop:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sj-totop { transition: none; } }

/* ===== 登录 / 注册弹窗（双栏：暗色品牌栏 + 亮色表单栏，对齐 auth.php 设计稿，颜色全走 --token，守禁六） ===== */
.sj-modal-mask { position:fixed; inset:0; background:var(--scrim-mid); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:90; opacity:0; transition:opacity .2s ease; }
.sj-modal-mask.show { display:flex; opacity:1; }
.sj-modal { position:relative; width:min(94vw,920px); max-height:90vh; background:var(--bg-main); border-radius:var(--radius-card); box-shadow:var(--shadow-lg); display:flex; flex-direction:row; overflow:hidden; transform:translateY(10px) scale(.98); transition:transform .2s ease; }
.sj-modal-mask.show .sj-modal { transform:translateY(0) scale(1); }

/* 左栏：暗色品牌栏 */
.sj-auth-brand { position:relative; flex:0 0 316px; padding:34px 28px 26px; background:var(--auth-brand-bg); color:var(--hx-ffffff); display:flex; flex-direction:column; overflow:hidden; }
.sj-auth-brand::after { /* 金色光晕，令牌化（color-mix 引用 --gold，守禁六） */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 82% -4%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%);
}
.sj-auth-brand-close { position:absolute; top:14px; right:14px; z-index:2; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; background:color-mix(in srgb, var(--hx-ffffff) 12%, transparent); color:var(--hx-ffffff); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:var(--transition-fast); }
.sj-auth-brand-close:hover { background:color-mix(in srgb, var(--hx-ffffff) 24%, transparent); }
.sj-auth-brand-mark { width:48px; height:48px; border-radius:var(--radius-sm); background:var(--gold); color:var(--on-accent); font-family:var(--serif); font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 32%, transparent); }
.sj-auth-brand-name { margin-top:16px; font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.5px; }
.sj-auth-brand-en { margin-top:4px; font-size:12px; letter-spacing:3px; color:color-mix(in srgb, var(--hx-ffffff) 58%, transparent); }
.sj-auth-brand-slogan { margin:18px 0 0; font-family:var(--serif); font-size:16px; line-height:1.6; color:color-mix(in srgb, var(--hx-ffffff) 82%, transparent); }
.sj-auth-brand-qr { margin-top:auto; align-self:flex-start; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius); background:color-mix(in srgb, var(--hx-ffffff) 10%, transparent); border:1px solid color-mix(in srgb, var(--hx-ffffff) 22%, transparent); backdrop-filter:blur(2px); }
.sj-auth-brand-qr-img { width:64px; height:64px; border-radius:8px; background:var(--hx-ffffff); object-fit:cover; }
.sj-auth-brand-qr-icon { flex-shrink:0; }
.sj-auth-brand-qr span { font-size:13px; color:var(--hx-ffffff); }
.sj-auth-brand-qr-tip { font-size:13px; line-height:1.5; }
.sj-auth-brand-qr-tip strong { color:var(--hx-ffffff); }
.sj-auth-brand-wx { margin-top:18px; display:flex; align-items:center; gap:7px; font-size:13px; color:var(--hx-ffffff); }
.sj-auth-brand-wx svg { color:var(--wechat-green); flex-shrink:0; }

/* 右栏：亮色表单栏 */
.sj-auth-form-wrap { position:relative; flex:1 1 auto; padding:30px 32px 26px; overflow-y:auto; display:flex; flex-direction:column; }
.sj-auth-error { margin-bottom:14px; padding:10px 12px; background:var(--accent-weak); color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius-sm); font-size:13px; line-height:1.5; }
.sj-auth-tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.sj-auth-tab { flex:1; border:none; background:none; padding:10px 0; cursor:pointer; font-family:var(--sans); font-size:14px; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--transition-fast); }
.sj-auth-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.sj-auth-panel { display:flex; flex-direction:column; gap:12px; }
.sj-auth-panel[hidden] { display:none; }
.sj-auth-field { display:flex; }
.sj-auth-field input { width:100%; height:44px; border:1px solid var(--line); border-radius:var(--radius); padding:0 14px; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--bg-main); outline:none; transition:var(--transition-fast); }
.sj-auth-field input:focus { border-color:var(--accent); }
.sj-auth-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--ink-2); }
.sj-auth-remember { display:flex; align-items:center; gap:8px; }
.sj-auth-row input { width:auto; }
.sj-auth-forgot { color:var(--ink-2); text-decoration:none; }
.sj-auth-forgot:hover { color:var(--accent); }
.sj-auth-agree { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.sj-auth-agree input { width:auto; margin-top:2px; }
.sj-auth-agree a { color:var(--accent); }
.sj-auth-submit { height:44px; border:none; border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition-fast); }
.sj-auth-submit:hover { background:var(--accent-dark); }
.sj-auth-submit:disabled { opacity:.6; cursor:not-allowed; }
.sj-auth-switch { text-align:center; font-size:13px; color:var(--ink-2); margin:2px 0 0; }
.sj-auth-switch a { color:var(--accent); font-weight:600; }

/* 微信登录区块（仅 $wechat_enabled 时由 PHP 渲染，守禁五·不无中生有） */
.sj-auth-divider { display:flex; align-items:center; text-align:center; margin:4px 0 2px; color:var(--ink-3); font-size:12.5px; }
.sj-auth-divider::before, .sj-auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.sj-auth-divider span { padding:0 12px; }
.sj-auth-wx { display:flex; flex-direction:column; gap:12px; }
.sj-auth-wx-steps { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12.5px; color:var(--ink-2); }
.sj-auth-wx-step { display:inline-flex; align-items:center; gap:6px; }
.sj-auth-wx-step .sn { width:18px; height:18px; border-radius:50%; background:var(--wechat-green); color:var(--hx-ffffff); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.sj-auth-wx-arrow { color:var(--ink-3); }
.sj-auth-wx-code { display:flex; gap:10px; }
.sj-auth-wx-code input { flex:1; height:44px; border:1px solid var(--line); border-radius:var(--radius); padding:0 14px; font-family:var(--sans); font-size:14px; letter-spacing:3px; color:var(--ink); background:var(--bg-main); outline:none; transition:var(--transition-fast); }
.sj-auth-wx-code input:focus { border-color:var(--wechat-green); }
.sj-auth-wx-btn { flex:0 0 auto; height:44px; padding:0 22px; border:none; border-radius:var(--radius-pill); background:var(--wechat-green); color:var(--hx-ffffff); font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition-fast); }
.sj-auth-wx-btn:hover { background:color-mix(in srgb, var(--wechat-green) 88%, #000); }
.sj-auth-wx-btn:disabled { opacity:.6; cursor:not-allowed; }
.sj-auth-wx-msg { min-height:18px; font-size:12.5px; color:var(--muted); }

/* 移动端：双栏堆叠为单栏（品牌栏变顶部横幅） */
@media (max-width: 760px) {
  .sj-modal { flex-direction:column; width:min(94vw,440px); max-height:92vh; }
  .sj-auth-brand { flex:none; flex-direction:row; align-items:center; gap:12px; padding:18px 20px; }
  .sj-auth-brand-mark { width:38px; height:38px; font-size:20px; }
  .sj-auth-brand-name { margin-top:0; font-size:18px; }
  .sj-auth-brand-en, .sj-auth-brand-slogan { display:none; }
  .sj-auth-brand-qr { margin-top:0; margin-left:auto; padding:8px 10px; }
  .sj-auth-brand-qr-img { width:46px; height:46px; }
  .sj-auth-brand-wx { display:none; }
}
@media (prefers-reduced-motion: reduce) { .sj-modal-mask, .sj-modal, .sj-auth-brand-close, .sj-auth-tab, .sj-auth-field input, .sj-auth-submit, .sj-auth-wx-btn { transition:none; } }

/* ===== 左下角用户菜单（已登录，点击用户卡弹出；颜色全走 --token，守禁六） ===== */
.sj-user-pop {
  position: fixed; z-index: 1300;
  width: min(86vw, 256px);
  background: var(--bg-main);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  color: var(--ink);
  font-family: var(--font-body);
}
.sj-user-pop[hidden] { display: none; }
.sj-user-pop-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sj-user-pop-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--bg-soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.sj-user-pop-av img { width: 100%; height: 100%; object-fit: cover; }
.sj-user-pop-meta { display: flex; flex-direction: column; min-width: 0; }
.sj-user-pop-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.sj-user-pop-sub { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-user-pop-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1; cursor: pointer; }
.sj-user-pop-item .ic { width: 18px; height: 18px; color: var(--ink-2); flex: 0 0 auto; }
.sj-user-pop-item:hover { background: var(--bg-left); color: var(--ink); }
.sj-user-pop-item:hover .ic { color: var(--accent); }
.sj-user-pop-item--danger { color: var(--accent); }
.sj-user-pop-item--danger .ic { color: var(--accent); }
.sj-user-pop-item--danger:hover { background: var(--accent-weak); color: var(--accent); }
.sj-user-pop-sep { height: 1px; background: var(--line); margin: 6px 4px; }
@media (prefers-reduced-motion: reduce) { .sj-user-pop { transition: none; } }

/* ===== 用户菜单扩展（参考布局：卡头→VIP/升级→常用→外观+设置→退出） ===== */
.sj-user-pop-name { display: inline-flex; align-items: center; gap: 6px; }
/* VIP/升级 行（未开通态 + 已开通态两种，共享布局） */
.sj-user-pop-vip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  margin: 4px 0 6px;
  border-radius: 10px;
  background: var(--accent-weak);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sj-user-pop-vip:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.sj-user-pop-vip .ic {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  color: var(--accent);
}
.sj-user-pop-vip-label {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.sj-user-pop-vip-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.sj-user-pop-vip-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-user-pop-vip-btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
  line-height: 1.5;
}
.sj-user-pop-vip-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 11px;
}
.sj-user-pop-vip--active { background: var(--bg-left); border-color: var(--line); }
.sj-user-pop-vip--active:hover { background: var(--bg-left); border-color: var(--line); }
.sj-user-pop-vip--active .ic { color: var(--accent); }

/* 外观行（菜单项风格 + 右侧胶囊组）—— 与 .sj-user-pop-item 视觉一致但不可点 → 用 -row 区别 */
.sj-user-pop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink); font-size: 14px; line-height: 1;
}
.sj-user-pop-row-ic { width: 18px; height: 18px; color: var(--ink-2); flex: 0 0 auto; }
.sj-user-pop-row-text { flex: 1 1 auto; }

.sj-theme-pills {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  flex: 0 0 auto;
}
.sj-theme-pill {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.5;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.sj-theme-pill:hover { color: var(--ink); }
.sj-theme-pill[aria-pressed="true"] {
  background: var(--bg-page, #fff);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}
/* 深色模式下浅色 pill 底色应与菜单底色拉开（菜单底 = card 表面） */
[data-theme="dark"] .sj-theme-pill[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* ===== 右栏底部：元信息链接 + 版权（与左栏「关于」组共用 sj_meta_links()；颜色全走 --token，守禁六） ===== */
.sj-right-footer {
  margin-top: auto;                 /* 推到右栏底部（.sj-right-inner 是 flex column） */
  flex: 0 0 auto;
  padding: 16px;
  border-top: 1px solid var(--line);
  background: transparent;
}
.sj-right-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
}
.sj-right-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-decoration: none;
  line-height: 1.6;
  transition: color .15s;
}
.sj-right-meta-link .sj-rm-ic { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }
.sj-right-meta-link:hover { color: var(--accent); text-decoration: none; }
.sj-right-copy { color: var(--faint); font-size: var(--fs-xs); line-height: 1.7; }
.sj-right-copy p { margin: 0; }
.sj-right-copy-main { color: var(--faint); }   /* v19.20.11：版权主行也用 --faint（用户原话「文字颜色变浅」） */
.sj-right-copy-beian { color: var(--faint); }

/* ===== 内容 VIP 门禁弹窗（全内容类型通用，content.php 统一调用） ===== */
.vip-gate {
  max-width: 720px;
  margin: 36px auto 60px;
  text-align: center;
  padding: 44px 32px 40px;
  background: var(--bg-main);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
}
/* 门禁内联会员等级（复用 vip.css 的 .vip-plan-* 卡，仅补网格容器） */
.vip-gate-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0 0 26px;
}
.vip-gate-plans .vip-plan-card { text-align: center; }
.vip-gate-plans .vip-plan-btn { margin-top: 4px; }
.vip-gate-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bg), #fff);
  border: 1px solid var(--accent-weak);
  color: var(--accent);
}
.vip-gate-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--ink); font-family: var(--serif); line-height: 1.35; }
.vip-gate-sub { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.vip-gate-perks {
  list-style: none; padding: 18px 22px; margin: 0 0 26px; text-align: left;
  background: var(--accent-bg); border: 1px solid var(--accent-weak); border-radius: 12px;
}
.vip-gate-perks li { font-size: 14px; color: var(--ink); line-height: 2.1; display: flex; align-items: center; gap: 8px; }
.vip-gate-perks .vgp-mark { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.vip-gate-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vip-gate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; font-size: 16px; font-weight: 700;
  padding: 13px 44px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(180, 83, 60, .28);
  transition: transform .12s, box-shadow .2s;
}
.vip-gate-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(180, 83, 60, .34); }
.vip-gate-login { font-size: 13px; color: var(--muted); text-decoration: none; }
.vip-gate-login:hover { color: var(--accent); }
.vip-gate-note { font-size: 12px; color: var(--muted); margin: 18px 0 0; }

/* ===== 柔性试读提示块（2026-08-31 新增·禁六 token 化） ===== */
/* 截断正文末尾的渐隐遮罩 + 居中开通引导 */
.sj-teaser {
  position: relative;
  margin-top: -120px;          /* 上拉盖住截断尾部，形成渐隐过渡 */
  padding-top: 120px;
  z-index: 2;
}
.sj-teaser-mask {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-main) 82%);
}
.sj-teaser-box {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 26px 28px 30px;
  background: var(--bg-main);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
}
.sj-teaser-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bg), #fff);
  border: 1px solid var(--accent-weak);
  color: var(--accent);
}
.sj-teaser-title { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--ink); font-family: var(--serif); }
.sj-teaser-sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; line-height: 1.6; }
.sj-teaser-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; font-size: 15px; font-weight: 700;
  padding: 12px 40px; border: none; border-radius: 10px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(180, 83, 60, .26);
  transition: transform .12s, box-shadow .2s;
}
.sj-teaser-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(180, 83, 60, .32); }
.sj-teaser-login { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); text-decoration: none; }
.sj-teaser-login:hover { color: var(--accent); }

/* 图文试读：未授权高清/下载在悬停时显示锁定角标（前端拦截提示的视觉辅助） */
.sj-prose[data-vip-teaser="gallery"] img {
  cursor: zoom-in;
}
.sj-prose[data-vip-teaser="gallery"] a[href$=".jpg"],
.sj-prose[data-vip-teaser="gallery"] a[href$=".png"],
.sj-prose[data-vip-teaser="gallery"] a[href$=".webp"],
.sj-prose[data-vip-teaser="gallery"] a[href$=".jpeg"] {
  position: relative;
}
.sj-prose[data-vip-teaser="gallery"] a[href$=".jpg"]::after,
.sj-prose[data-vip-teaser="gallery"] a[href$=".png"]::after,
.sj-prose[data-vip-teaser="gallery"] a[href$=".webp"]::after,
.sj-prose[data-vip-teaser="gallery"] a[href$=".jpeg"]::after {
  content: "[锁]";
  position: absolute;
  right: 6px; top: 6px;
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  opacity: .0;
  transition: opacity .15s;
}
.sj-prose[data-vip-teaser="gallery"] a[href$=".jpg"]:hover::after,
.sj-prose[data-vip-teaser="gallery"] a[href$=".png"]:hover::after,
.sj-prose[data-vip-teaser="gallery"] a[href$=".webp"]:hover::after,
.sj-prose[data-vip-teaser="gallery"] a[href$=".jpeg"]:hover::after {
  opacity: .9;
}

/* ===== 详情页浮动快捷导航：固定在「站点左栏右缘 + 12px」空白列（2026-08-31 用户截图红框位置）
   仅 body.page-detail 生效。
   浮窗用 position:fixed 脱离文档流，钉在站左右缘外 12px；
   正文 .detail-layout 取消内部 2 栏 grid（原 grid-template-columns:56px minmax(0,760px) 在浮窗 fixed 脱离后，
   第一列 56px 空着仍占位会把 760px 第二列挤压成窄条，导致标题竖排/段落单字换行——第八轮踩坑），
   改 block + max-width:880 + margin:0 auto 居中；.detail-main 占满中主体宽度，不再受 56px 空列挤压。 ===== */
body.page-detail .detail-side {
  position: fixed !important;
  left: calc(var(--sujian-left-w) + 4px) !important;   /* 紧贴左栏/中栏分隔线内侧（中栏 padding 内），不再外凸 12px */
  top: 50% !important;                                   /* 上下垂直居中（相对视口高度） */
  transform: translateY(-50%) !important;               /* 居中修正：仅 Y 位移，不影响 left */
  width: 56px !important;
  border: none !important;                              /* 去掉边框线（用户要"不要边框"） */
  z-index: 45;
}
body.page-detail .detail-layout {
  display: block !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
}
body.page-detail .detail-layout > .detail-main {
  max-width: none !important;
  margin: 0 !important;
}


/* ===================== 官方纪事（朝代页 · fa_timeline_node） =====================
   2026-09-07 打通时间轴数据孤岛：fa_timeline / fa_timeline_node 有数据但前台从不读取。
   2026-10-29 该区块由 ?type=timeline 迁到 ?type=dynasty（朝代卡片网格之后），
   故类名由 tl-official*（timeline 专属前缀）改为 sj-official*，与同页 .sj-dynasty-grid 归族。
   守禁六：颜色/间距全走主题变量，不写死色值。 */
.sj-official {
  margin: 0 0 var(--spacing-lg, 18px);
  padding: var(--spacing-md, 14px) var(--spacing-lg, 18px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-bg);
}
.sj-official-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.sj-official-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.sj-official-count {
  font-size: 12px;
  color: var(--muted);
}
.sj-official-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-sm, 10px);
}
.sj-official-item {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, transparent);
}
.sj-official-year {
  flex: 0 0 auto;
  min-width: 46px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, var(--text));
  text-align: right;
}
.sj-official-body {
  min-width: 0;
}
.sj-official-body b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.sj-official-body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 640px) {
  .sj-official-list { grid-template-columns: 1fr; }
}

/* =====================================================================
 * 传统色 —— 通用组件（全站加载）
 * ---------------------------------------------------------------------
 * 产出方：core/color.php 的 color_autolink() / color_panel_html() /
 *         color_chip() / color_strip()
 * 放在全站样式而非 pages/color.css：正文自动识别会把 .c-ref 撒进
 * 文章/百科/书目/相册/服饰任意页面，样式必须随内容走，不能只在色库页生效。
 * 界面颜色一律走 --token；色卡自身的色值由内联 --c 变量提供（那是业务数据）。
 * ===================================================================== */

/* 正文中的色名链接：色点 + 虚线下划 */
.c-ref {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--line-hover);
  padding-bottom: 1px;
  transition: border-color .16s, color .16s;
}
.c-ref::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  border-radius: 2px;
  margin-right: .24em;
  vertical-align: baseline;
  background: var(--c, var(--line-hover));
  box-shadow: inset 0 0 0 1px rgba(31, 30, 27, .18);
}
.c-ref:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* 文末「本文涉及色」色板 */
.c-panel {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  overflow: hidden;
}
.c-panel-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.c-panel-hd em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.c-panel-bd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 16px;
}
.c-panel-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  text-decoration: none;
  color: var(--ink);
  font-size: 12.5px;
  transition: border-color .16s, background .16s;
}
.c-panel-item:hover { border-color: var(--line-hover); background: var(--bg-soft); }
.c-panel-item i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(31, 30, 27, .12);
  flex: none;
}
.c-panel-item b { font-weight: 400; font-family: var(--serif); letter-spacing: .04em; }
.c-panel-item span {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* 单色块（后台列表 / 前台卡片通用） */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
}
.c-chip i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(31, 30, 27, .12);
}
.c-chip b { font-weight: 400; }
.c-chip-hex {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-3);
}
.c-chip-sm i { width: 14px; height: 14px; }
.c-chip-lg i { width: 30px; height: 30px; }

/* 配色条：宽度即占比；服饰方案 ratio 全 0 时退化为等宽 */
.c-strip {
  display: flex;
  height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.c-strip i {
  display: block;
  flex: 1;
  position: relative;
  transition: flex .3s;
}
.c-strip i:hover { flex-grow: 1.6; }
.c-strip i span {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .9);
  opacity: 0;
  transition: opacity .2s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.c-strip i:hover span { opacity: 1; }

/* =====================================================================
 * 085/086 三库词条（色 / 纹样 / 面料） —— 正文链接 + pop 弹窗
 * =====================================================================
 * 放在全站样式而非 pages/color.css：核心自动识别会把 .k-ref 撒进
 * 文章/百科/书目/相册/服饰任意页面，样式必须随内容走。
 * 界面色一律走 --token；色卡自身的色值由内联 --c 提供（那是业务数据）。
 * ===================================================================== */

/* 正文中的词条链接：虚线下划，hover 变强调色。
   色名同时带 .c-ref，那时由 .c-ref::before 画小色点，两条规则共存不冲突。 */
.k-ref {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--line-hover);
  padding-bottom: 1px;
  cursor: help;
  transition: border-color .16s, color .16s;
}
.k-ref:hover,
.k-ref:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- pop 弹窗 ---------- */
.k-pop {
  position: fixed;
  z-index: 90;
  width: min(320px, calc(100vw - 24px));
  padding: 13px 15px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(31, 30, 27, .18));
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.k-pop[hidden] { display: none; }
.k-pop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.k-pop-dict {
  display: inline-block;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .1em;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--ink-3);
  vertical-align: 2px;
}
/* 三库角标各有辨识色，但都走 token，暗色模式下自动跟随 */
.k-pop-dict[data-dict="color"]   { background: rgba(154, 90, 43, .12); color: #8a5a2b; }
.k-pop-dict[data-dict="pattern"] { background: rgba(58, 106, 92, .12); color: #3a6a5c; }
.k-pop-dict[data-dict="fabric"]  { background: rgba(84, 92, 122, .12); color: #545c7a; }

.k-pop-name {
  display: inline-block;
  margin-left: 7px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
}
.k-pop-name:hover { color: var(--accent); }
/* 色名标题前的真实色点 —— 唯一能让人一眼看懂「什么颜色」的表达方式 */
.k-pop-name.has-dot::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: baseline;
  background: var(--c, transparent);
  box-shadow: inset 0 0 0 1px rgba(31, 30, 27, .2);
}

.k-pop-pinyin {
  margin-left: 7px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.k-pop-sub {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
}
.k-pop-sum {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.k-pop-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.k-pop-more {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
}

/* ---------- 文末「本文涉及」面板：三库合并版 ---------- */
.c-panel-grouped { flex-direction: column; gap: 10px; }
.c-panel-row { display: flex; gap: 10px; align-items: flex-start; }
.c-panel-k {
  flex: none;
  width: 30px;
  padding-top: 5px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.c-panel-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.k-panel-item b { font-weight: 400; font-family: var(--serif); letter-spacing: .06em; }
.k-panel-item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--line-hover);
}


/* ===================== 导航抽屉「全部栏目」（2026-10-30 · 左栏头部 ▦ 触发） =====================
   结构：_navbar.php 末尾 #sjNavdrawer；行为：sujian.js「导航抽屉」段。
   令牌全走 theme-vars.css（守禁六）；新增三库类型色 --t-color/--t-pattern/--t-fabric 已入 :root 与 dark。 */
.sj-nd-scrim{position:fixed;inset:0;background:var(--scrim-mid);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
body.sj-nd-open .sj-nd-scrim{opacity:1;pointer-events:auto}

.sj-navdrawer{position:fixed;left:0;top:0;bottom:0;z-index:91;
  width:min(440px,92vw);
  display:flex;flex-direction:column;
  background:var(--bg-main);border-right:1px solid var(--line);box-shadow:var(--shadow-lg);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
body.sj-nd-open .sj-navdrawer{transform:none}
body.sj-nd-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .sj-navdrawer{transition:none}
  .sj-nd-scrim{transition:none}
}

/* 头部：印章 + 站名 + 关闭 */
.sj-nd-head{display:flex;align-items:center;gap:10px;padding:13px 16px 11px;border-bottom:1px solid var(--line)}
.sj-nd-seal{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-family:var(--serif);font-size:16px;font-weight:700;flex:0 0 auto}
.sj-nd-head-meta{min-width:0}
.sj-nd-head-meta b{display:block;font-family:var(--serif);font-size:15.5px;letter-spacing:.03em;line-height:1.2;color:var(--ink)}
.sj-nd-head-meta span{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);margin-top:2px}
.sj-nd-close{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.sj-nd-close:hover{background:var(--bg-left-hover);color:var(--ink);border-color:var(--line-hover)}
.sj-nd-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sj-nd-close .ic{width:16px;height:16px}

/* 搜索（26 项规模下，筛选不是装饰） */
.sj-nd-search{margin:8px 16px 0;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--radius-full);background:var(--bg-soft);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.sj-nd-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.sj-nd-search .ic{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}
.sj-nd-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:13px;color:var(--ink);font-family:inherit}
.sj-nd-search input::placeholder{color:var(--ink-3)}
.sj-nd-search kbd{font-family:var(--sans);font-size:10px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;background:var(--bg-main)}

/* 滚动体 + 分组 */
.sj-nd-body{flex:1;overflow:auto;padding:2px 16px 8px;scrollbar-width:thin}
.sj-nd-body::-webkit-scrollbar{width:8px}
.sj-nd-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.sj-nd-group{padding-top:2px}
.sj-nd-group-title{display:flex;align-items:center;gap:8px;margin:6px 0 5px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink-3)}
.sj-nd-group-title::after{content://;flex:1;height:1px;background:var(--line)}
.sj-nd-group-title em{font-style:normal;letter-spacing:0;color:var(--ink-3);opacity:.75}
/* 搜索态：计数失去意义（结果数≠栏目数），专题库三列改自适应，避免单个结果孤零零占三分之一 */
body.sj-nd-searching .sj-nd-group-title em{display:none}
body.sj-nd-searching .sj-nd-libs{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}

/* 普通栏目：2 列磁贴 */
.sj-nd-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sj-nd-item{display:flex;align-items:center;gap:8px;padding:5px 9px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card-bg);
  transition:border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}
.sj-nd-item:hover{border-color:var(--line-hover);background:var(--bg-soft);transform:translateY(-1px);box-shadow:var(--shadow)}
.sj-nd-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sj-nd-item.is-active{border-color:var(--accent);background:var(--accent-bg)}
.sj-nd-ic{width:28px;height:28px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
  background:var(--tint-bg,var(--bg-soft));color:var(--tint,var(--ink-2))}
.sj-nd-ic .ic{width:16px;height:16px}
.sj-nd-text{min-width:0}
.sj-nd-label{display:block;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.sj-nd-note{display:block;font-size:10px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 专题库：3 列，色卡 / 菱格 / 织纹条（视觉主角） */
.sj-nd-libs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.sj-nd-lib{display:block;padding:6px 7px 7px;text-decoration:none;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card-bg);
  transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}
.sj-nd-lib:hover{border-color:var(--line-hover);transform:translateY(-1px);box-shadow:var(--shadow)}
.sj-nd-lib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sj-nd-lib.is-active{border-color:var(--accent);background:var(--accent-bg)}
.sj-nd-sw{display:block;height:20px;border-radius:6px;margin-bottom:5px;overflow:hidden;position:relative}
/* 传统色：五正色色带（朱砂 / 藤黄 / 石青 / 石绿 / 墨，--sw-1..5） */
.sj-nd-sw--color{background:linear-gradient(90deg,var(--sw-1) 0 20%,var(--sw-2) 20% 40%,var(--sw-3) 40% 60%,var(--sw-4) 60% 80%,var(--sw-5) 80% 100%)}
/* 纹样：菱格（双向斜线交叉，线细一格，避免变成"铁丝网"） */
.sj-nd-sw--pattern{
  background-color:var(--t-pattern-bg);
  background-image:
    repeating-linear-gradient(45deg,transparent 0 6px,currentColor 6px 7px),
    repeating-linear-gradient(-45deg,transparent 0 6px,currentColor 6px 7px);
  color:var(--t-pattern);opacity:.62}
/* 面料：经密纬疏的织纹（竖向密线 + 横向疏线），区别于纹样的菱格 */
.sj-nd-sw--fabric{
  background-color:var(--t-fabric-bg);
  background-image:
    repeating-linear-gradient(90deg,transparent 0 3px,currentColor 3px 4px),
    repeating-linear-gradient(0deg,transparent 0 7px,currentColor 7px 8px);
  color:var(--t-fabric);opacity:.6}
.sj-nd-lib-name{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink)}
.sj-nd-lib-name .ic{width:13px;height:13px;color:var(--ink-3)}
.sj-nd-lib-note{display:block;font-size:10px;color:var(--ink-3);margin-top:2px}

/* 关于：单行文字链（圆点分隔），层级最低，不与主栏目抢视觉 */
.sj-nd-links{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;font-size:11px;letter-spacing:.01em}
.sj-nd-link{color:var(--ink-2);text-decoration:none;padding:2px 0;transition:color var(--transition-fast)}
.sj-nd-link + .sj-nd-link::before{content:/·/;margin:0 6px;color:var(--ink-3)}
.sj-nd-link:hover{color:var(--accent)}
.sj-nd-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* 空态（搜索无结果） */
.sj-nd-empty{display:none;padding:34px 10px;text-align:center;color:var(--ink-3);font-size:12.5px}
.sj-nd-empty .ic{width:26px;height:26px;margin:0 auto 8px;color:var(--line-hover)}
body.sj-nd-searching .sj-nd-group--empty-hide{display:none}
body.sj-nd-no-hit .sj-nd-empty{display:block}

/* 底栏 */
.sj-nd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;
  padding:11px 16px;border-top:1px solid var(--line);background:var(--bg-right);
  font-size:11px;color:var(--ink-3)}
.sj-nd-foot kbd{font-family:var(--sans);font-size:10px;border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;background:var(--bg-main);color:var(--ink-2)}
.sj-nd-foot a{color:var(--accent);text-decoration:none;font-weight:600}

/* 左栏头部触发钮 ▦：与右侧 ☰（折叠左栏）在形状与色彩上双重区分 */
.sj-nd-open{margin-left:auto;width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--accent-bg);color:var(--accent);transition:background var(--transition-fast),color var(--transition-fast)}
.sj-nd-open:hover{background:var(--accent);color:var(--on-accent)}
.sj-nd-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sj-nd-open .ic{width:16px;height:16px}
/* 折叠态（64px 轨道）下抽屉触发钮随左栏收起由 layout.css 的折叠规则统一隐藏 */
@media (max-width:760px){
  .sj-nd-grid{grid-template-columns:1fr}
}