/* ============================================================
 * 书单筛选（booklist）— bl- 前缀
 * 前台经 layout_head 注入、后台经 admin_head 注入（同一文件）
 * 颜色全部走 CSS 变量（与 thread_rating 同体系）
 * ============================================================ */

/* ---------- 筛选页页头 ---------- */

.bl-headline {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 2px 14px;
}

.bl-headline h1 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--tx);
    margin: 0;
}

/* ---------- 筛选条 ---------- */

.bl-filter {
    padding: 6px 18px;
}

/* 书单库专属搜索：书名/作者/标签/一句话推荐 */
.bl-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.bl-search input[type="text"] {
    flex: 1;
    min-width: 0;
    max-width: 440px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: var(--sans);
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s;
}

.bl-search input[type="text"]:focus {
    border-color: var(--ac-2);
}

/* 搜索行尾「我的书架」入口：幽灵描边（弱于搜索实心钮，个人入口不抢 CTA） */
.bl-shelf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-2);
    background: var(--card);
    border: 1px solid var(--ac-2);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.bl-shelf-link:hover {
    background: var(--ac-2);
    color: #FFF;
}

.bl-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--ac-2);
    border: 1px solid var(--ac-2);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
}

.bl-search-btn:hover {
    filter: brightness(1.08);
}

/* 搜索态胶囊标签：浅橙底 + 右侧 × 清除钮，对齐筛选 chips 激活态语言 */
.bl-search-meta {
    display: inline-flex;
    align-items: stretch;
    font-size: 12.5px;
    color: var(--ac-2);
    background: rgba(198, 120, 42, 0.08);
    border: 1px solid rgba(198, 120, 42, 0.35);
    border-radius: 999px;
    overflow: hidden;
    white-space: nowrap;
}

.bl-search-meta-txt {
    padding: 5px 6px 5px 12px;
    align-self: center;
}

.bl-search-meta-x {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1;
    color: var(--ac-2);
    text-decoration: none;
    border-left: 1px dashed rgba(198, 120, 42, 0.35);
    transition: color 0.15s, background 0.15s;
}

.bl-search-meta-x:hover {
    color: #fff;
    background: var(--ac-2);
}

.bl-frow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--bd);
}

.bl-frow:last-child {
    border-bottom: 0;
}

.bl-flabel {
    flex: 0 0 auto;
    min-width: 52px;
    padding-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-2, var(--tx));
    opacity: 0.75;
}

.bl-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.bl-chip {
    display: inline-block;
    padding: 3px 11px;
    font-size: 12.5px;
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.bl-chip:hover {
    border-color: var(--ac-2);
    color: var(--ac-2);
}

.bl-chip.is-on {
    background: var(--ac-2);
    border-color: var(--ac-2);
    color: #fff;
}

/* ---------- 结果计数行 ---------- */

.bl-count {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 0;
    font-size: 13px;
    color: var(--tx-2, var(--tx));
    opacity: 0.85;
}

.bl-reset {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--ac-2);
    text-decoration: none;
}

.bl-reset:hover {
    text-decoration: underline;
}

/* ---------- 书单列表 ---------- */

.bl-list {
    padding: 8px 18px 6px;
}

/* 条目：封面缩略 + 信息两栏（与详情页 hero 同视觉语言）
   stretch 让文字列拉满封面高度，配合 .bl-meta 贴底，两列头尾对齐不漂浮 */
.bl-item {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 13px 0 11px;
    border-bottom: 1px dashed var(--bd);
}

.bl-item:last-child {
    border-bottom: 0;
}

/* 封面缩略：3:4，整块可点跳详情；flex-start 保自然高度（长简介时不被拉伸出空边框） */
.bl-item-cover {
    flex: 0 0 auto;
    align-self: flex-start;
    display: block;
    width: 72px;
    border-radius: var(--radius-s, 4px);
    overflow: hidden;
    border: 1px solid var(--bd);
}

.bl-item-cover img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}

/* 无封面迷你占位：图标 + 书名 + 暂无封面（同详情页三段式，缩小版） */
.bl-item-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 96px;
    padding: 6px 4px;
    text-align: center;
    background: var(--bd);
    color: var(--tx-2, var(--tx));
    box-sizing: border-box;
}

.bl-item-ph svg {
    opacity: 0.5;
    flex: 0 0 auto;
}

.bl-item-ph-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tx);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bl-item-ph-hint {
    font-size: 9px;
    opacity: 0.65;
    flex: 0 0 auto;
}

.bl-item-body {
    flex: 1 1 0;
    min-width: 0; /* 长标签/长介绍防溢出 */
    display: flex;
    flex-direction: column; /* .bl-meta margin-top:auto 贴底的前提 */
}

.bl-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bl-title > a {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
    text-decoration: none;
}

.bl-title > a:hover {
    color: var(--ac-2);
}

/* 列表条目标题行内的作者（弱化，随标签行流动） */
.bl-item-author {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.bl-tag {
    display: inline-block;
    padding: 1px 8px;
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--tx-2, var(--tx));
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--radius-s, 4px);
    white-space: nowrap;
}

.bl-tag-ch.is-male {
    color: #185FA5;
    border-color: #85B7EB;
    background: #E6F1FB;
}

.bl-tag-ch.is-female {
    color: #993556;
    border-color: #ED93B1;
    background: #FBEAF0;
}

.bl-tag-src {
    opacity: 0.85;
}

/* 完结状态：已完结（绿）/ 连载中（橙） */
.bl-tag-fin {
    color: #3B6D11;
    border-color: #97C459;
    background: #EAF3DE;
}

.bl-tag-brk {
    color: #791F1F;
    border-color: #F09595;
    background: #FCEBEB;
}

.bl-tag-ong {
    color: #854F0B;
    border-color: #EF9F27;
    background: #FAEEDA;
}

.bl-intro {
    margin-top: 9px; /* 与标题/标签行留呼吸感，避免拥挤 */
    font-size: 13px;
    line-height: 1.6;
    color: var(--tx-2, var(--tx));
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.bl-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto; /* 贴底与封面底边对齐；文字列高于封面时 auto 归零退化为普通间距 */
    padding-top: 6px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.8;
}

.bl-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.bl-meta .bl-date {
    margin-left: auto;
}

/* 综合热度徽章（算法合成分，与用户评分区分） */
.bl-heat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #854F0B;
    background: #FAEEDA;
    border: 1px solid #EF9F27;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- 发帖/编辑表单字段区 ---------- */

.bl-field {
    padding: 12px 14px;
    border: 1px solid var(--bd);
    border-radius: var(--radius);
}

.bl-grid {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.bl-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bl-sub {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tx-2, var(--tx));
    opacity: 0.8;
}

.bl-radios {
    display: inline-flex;
    gap: 14px;
    align-items: center;
}

.bl-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    cursor: pointer;
}

.bl-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.bl-line .bl-sub {
    flex: 0 0 auto;
    padding-top: 8px;
}

/* 发布表单验证码行：captcha-row 占满 bl-line 剩余宽度（口径对齐核心回复框 440px 上限） */
.bl-line .captcha-row {
    flex: 1 1 0;
    min-width: 0;
    max-width: 440px;
}

/* bl-line 行内裸 radio 组（分类单选行）：补偿 bl-sub 的 padding-top，使标签与选项文字中心线齐平；
   访问权限区（bl-access-zone）为标签贴顶设计（.bl-access-zone > .bl-sub padding-top:0），排除不受影响 */
.bl-line:not(.bl-access-zone) .bl-radios {
    padding-top: 7px;
}

.bl-chks {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.bl-chk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 12.5px;
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}

.bl-chk:has(input:checked) {
    border-color: var(--ac-2);
    color: var(--ac-2);
}

.bl-chk input {
    accent-color: var(--ac-2);
    margin: 0;
}

/* ---------- 频道分组选项（男频/女频分类流派分流） ----------
   男频/女频各自一套选项时按组渲染（.bl-chgrp），JS 随频道单选切换显隐；
   无 JS 或未选频道时两组全显——每组独占一行（男频组一行、女频组换行下一行），
   组间从行首左对齐，避免接排在选项行中段形成锯齿错位；组内选项可换行 */
.bl-radios.is-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.bl-chks.is-split {
    row-gap: 8px;
}

.bl-chgrp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    /* 占满父容器整行 → 男频组/女频组各起一行且行首对齐；组内选项多时自行换行 */
    flex: 0 0 100%;
    min-width: 0;
}

.bl-radios .bl-chgrp {
    gap: 14px;
}

.bl-chks .bl-chgrp {
    gap: 6px;
}

/* 组标签（男频/女频）：提示当前显示的是哪个频道的选项集 */
.bl-grp-tag {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--tx-2, var(--tx));
    opacity: 0.6;
    white-space: nowrap;
}

/* ---------- 后台：版块多选与统计格 ---------- */

.bl-forums {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
}

.bl-fitem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    cursor: pointer;
}

.bl-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

.bl-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--radius);
}

.bl-stat strong {
    font-family: var(--serif);
    font-size: 24px;
    color: var(--tx);
}

.bl-stat span {
    font-size: 12.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.8;
}

/* ============================================================
 * 单本书独立页（book-{id}.html）
 * ============================================================ */

/* ---------- 信息卡：封面 + 书籍信息 ---------- */

/* 面包屑与下方卡片间距（核心 .breadcrumb 无 margin，裸放时会与卡片粘连；覆盖书单系全部页面） */
.bl-page > .breadcrumb {
    margin: 2px 2px 14px;
}

.bl-hero {
    display: flex;
    gap: 22px;
    padding: 22px;
    margin-bottom: 16px;
}

.bl-cover {
    flex: 0 0 auto;
    width: 150px;
}

.bl-cover img,
.bl-cover .bl-cover-ph {
    display: block;
    width: 150px;
    height: 200px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--bd);
}

/* 无封面占位：图标 + 书名 + 暂无封面提示（列向居中）
   注意选择器带 .bl-cover 前缀：与上方 .bl-cover .bl-cover-ph 的 display:block 同特异性，
   靠源码顺序在后取胜——勿提前或去掉前缀，否则 flex 再被覆盖、内容回退左上角 */
.bl-cover .bl-cover-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    text-align: center;
    color: var(--tx-2, var(--tx));
    opacity: 0.85;
    background: var(--bd);
}

.bl-cover .bl-cover-ph svg {
    opacity: 0.5;
    flex: 0 0 auto;
}

/* 书名文字封面：衬线加粗，最多两行截断 */
.bl-cover-ph-title {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tx);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bl-cover-ph-hint {
    font-size: 11px;
    opacity: 0.65;
    flex: 0 0 auto;
}

.bl-hero-info {
    flex: 1 1 0;
    min-width: 0; /* 长标题/长标签行防溢出 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bl-book-title {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tx);
    margin: 0;
    overflow-wrap: anywhere;
}

.bl-book-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* 作者行（详情页 hero）：图标 + 作者名 */
.bl-book-author {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tx-2, var(--tx));
}

.bl-book-author svg {
    vertical-align: -2px;
    margin-right: 2px;
    opacity: 0.7;
}

.bl-book-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--tx-2, var(--tx));
    opacity: 0.92;
}

/* 数据行（与列表页 bl-meta 同节奏） */
.bl-stats {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.88;
}

.bl-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.bl-stats small {
    font-size: 11px;
    opacity: 0.8;
}

/* ---------- CTA 行：书架 + 去原帖 + 推荐人 ---------- */

.bl-hero-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto; /* 数据行长短不一时 CTA 贴底对齐 */
    padding-top: 6px;
}

.bl-shelf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.bl-shelf-body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

/* hero 书架操作区：与书页主 CTA 风格统一——主按钮实心 / 状态切换一体分段控件 / 继续阅读描边 */

/* .btn 前缀提升特异性：本类与核心 .btn 同名属性竞争，(0,1,0) 时胜负取决于 CSS 加载顺序，
   加固后 (0,2,0) 稳赢（2026-10-20 书页「查看评论」被核心橙底覆盖事故） */
.btn.bl-shelf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--ac-2);
    border: 1px solid var(--ac-2);
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s, opacity 0.15s;
}

.btn.bl-shelf-btn:hover {
    filter: brightness(1.08);
}

/* 阅读状态：一体式分段控件（连体容器 + 内部分格），替代散落小胶囊 */
.bl-seg {
    display: inline-flex;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.bl-seg-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-family: var(--sans);
    color: var(--tx-2, var(--tx));
    background: none;
    border: none;
    border-left: 1px solid var(--bd);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.bl-seg-btn:first-child {
    border-left: none;
}

.bl-seg-btn:hover {
    color: var(--ac-2);
}

/* 激活态 hover 必须保持白字：上面通用 hover 规则会命中 is-on（橙底）把文字染成橙色
   ——橙底橙字文字直接消失（2026-10-18 书页按钮 hover 事故），此处覆盖 + 亮度微增 */
.bl-seg-btn.is-on,
.bl-seg-btn.is-on:hover {
    background: var(--ac-2);
    color: #fff;
    font-weight: 600;
}

.bl-seg-btn.is-on:hover {
    filter: brightness(1.08);
}

/* 我的书架直达：文字标签钮 —— 纯图标语义不直观（2026-10-20 改图标+文字），与继续阅读同规格 */
.bl-shelf-goto {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--tx-2, var(--tx));
    background: none;
    border: 1px solid var(--bd);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.bl-shelf-goto:hover {
    color: var(--ac-2);
    border-color: var(--ac-2);
    background: rgba(232, 169, 58, 0.08);
}

.bl-shelf-continue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--ac-2);
    border: 1px solid var(--ac-2);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.bl-shelf-continue:hover {
    background: var(--ac-2);
    color: #fff;
}

/* 移出书架：文字标签钮（常态弱化描边，hover 红警示）—— 同上改图标+文字 */
.bl-shelf-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--tx-2, var(--tx));
    background: none;
    border: 1px solid var(--bd);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.bl-shelf-remove:hover {
    color: #791F1F;
    border-color: #791F1F;
    background: rgba(121, 31, 31, 0.06);
}

/* 统计行「书架 N」链接化：承接原「进入书架」入口 */
.bl-stat-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--bd);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}

.bl-stat-link:hover {
    color: var(--ac-2);
    border-bottom-color: var(--ac-2);
}

/* 查看评论：描边次级按钮（与送礼物同级），让实心主操作唯一化 */
/* 同上：.btn 前缀加固，防核心 .btn 橙底按加载顺序反杀 */
.btn.bl-discuss-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn.bl-discuss-btn:hover {
    border-color: var(--ac-2);
    color: var(--ac-2);
}

.bl-recommender {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto; /* 贴右；窄屏换行后自动归位 */
    font-size: 12.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.88;
    white-space: nowrap;
}

.bl-recommender a {
    color: var(--tx);
    font-weight: 500;
    text-decoration: none;
}

.bl-recommender a:hover {
    color: var(--ac-2);
}

/* ---------- 双栏：章节目录（主） + 同题材推荐（侧） ---------- */

.bl-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.bl-main,
.bl-side {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.bl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* 窄屏标题组与按钮组放不下时换行，不挤压 */
    gap: 10px;
    padding: 14px 18px 0;
}

.bl-card-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--tx);
    margin: 0;
}

.bl-card-head .muted {
    font-size: 12.5px;
}

/* 卡头左组（标题+计数）与右组（操作按钮）：两栏分布，避免多子元素被 space-between 撑散 */
.bl-card-head-l {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bl-card-head-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* ---------- 书籍介绍（正文 Markdown 完整展示） ---------- */

.bl-intro-body {
    padding: 12px 18px 16px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--tx);
    overflow-wrap: anywhere;
}

/* ---------- 章节目录 ---------- */

.bl-toc {
    list-style: none;
    margin: 0;
    padding: 8px 10px 14px;
}

.bl-toc li {
    border-bottom: 1px dashed var(--bd);
}

.bl-toc li:last-child {
    border-bottom: 0;
}

.bl-toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 8px;
    text-decoration: none;
    border-radius: var(--radius-s, 4px);
}

.bl-toc a:hover {
    background: var(--bd);
}

.bl-toc-no {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.7;
    white-space: nowrap;
}

.bl-toc-title {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13.5px;
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 目录行单行截断，多行时列表过长 */
}

.bl-toc a:hover .bl-toc-title {
    color: var(--ac-2);
}

.bl-toc-meta {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.7;
    white-space: nowrap;
}

.bl-toc + .pager {
    margin: 0 18px 14px;
}

/* 目录行 flex 化：主链接 + 作者行内编辑按钮并排（li 兼容旧结构：无按钮时主链接自动占满） */
.bl-toc li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bl-toc li > .bl-toc-link,
.bl-toc li > a {
    flex: 1 1 0;
    min-width: 0;
}

.bl-toc-edit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-s, 4px);
    color: var(--tx-2, var(--tx));
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.bl-toc-edit:hover {
    opacity: 1;
    color: var(--ac-2);
    background: var(--bd);
}

/* 章节付费徽标（目录行内）：is-price 标价（暖金）/ is-paid 已购（绿），游客也可见标价 */
.bl-toc-flag {
    flex: 0 0 auto;
    display: inline-block;
    padding: 1px 8px;
    font-family: var(--sans);
    font-size: 11px;
    line-height: 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.bl-toc-flag.is-price {
    color: #854F0B;
    border-color: #EF9F27;
    background: #FAEEDA;
}

.bl-toc-flag.is-paid {
    color: #3B6D11;
    border-color: #97C459;
    background: #EAF3DE;
}

/* 章节卡头操作按钮（已归组 .bl-card-head-btns 靠右，不再用 margin-left:auto 撑位） */
.bl-toc-add {
    font-size: 12.5px;
    padding: 4px 12px;
}

/* 空目录引导（作者视角：去添加第一章） */
.bl-toc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 18px;
}

.bl-toc-empty p {
    margin: 0;
    color: var(--tx-2, var(--tx));
    opacity: 0.75;
}

/* ---------- 章节表单页 ---------- */

.bl-chapter-editor .bl-card-head {
    align-items: baseline;
}

.bl-chapter-editor .bl-card-head h1 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--tx);
    margin: 0;
}

.bl-chapter-editor .form {
    padding: 0 18px;
}

.bl-chapter-editor textarea[name="content"] {
    font-size: 14.5px;
    line-height: 1.9;
    min-height: 380px;
}

.bl-chapter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bl-chapter-del {
    padding: 14px 18px 0;
    border-top: 1px dashed var(--bd);
    margin-top: 14px;
}

.bl-chapter-hint {
    margin: 10px 18px 0;
    padding-bottom: 16px;
    font-size: 12.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.7;
}

/* ---------- 章节阅读页 ---------- */

.bl-chapter-body {
    padding-bottom: 18px;
}

.bl-chapter-head {
    padding: 18px 22px 14px;
    border-bottom: 1px dashed var(--bd);
}

.bl-chapter-head h1 {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 700;
    color: var(--tx);
    margin: 0 0 8px;
    line-height: 1.5;
}

.bl-chapter-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.85;
}

.bl-chapter-meta .bl-chapter-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--ac-2);
    text-decoration: none;
    opacity: 1;
}

.bl-chapter-meta .bl-chapter-edit:hover {
    text-decoration: underline;
}

/* 章节举报入口（文字标签，与编辑链接同规格；破坏性/警示操作 hover 转红） */
.bl-chapter-meta .bl-chapter-report {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--tx-3);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.bl-chapter-meta .bl-chapter-report:hover {
    color: var(--danger);
    text-decoration: underline;
}

.bl-chapter-meta .bl-chapter-report.is-disabled {
    color: var(--tx-3);
    cursor: default;
    text-decoration: none;
    opacity: 0.7;
}

/* 付费章节购买卡（locked 时替代正文渲染）：居中门卡，锁图标 + 售价 + 余额 + 购买/登录入口 */
.bl-chapter-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 46px 26px 40px;
    margin: 18px 18px 0;
    border: 1px dashed var(--bd);
    border-radius: var(--radius, 8px);
    background: var(--bg-2, var(--card));
}

.bl-chapter-lock-icon {
    color: var(--ac-2, #C4633F);
    opacity: 0.9;
    margin-bottom: 4px;
}

.bl-chapter-lock-icon svg {
    display: block;
}

.bl-chapter-lock h2 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--tx);
    margin: 0;
}

.bl-chapter-lock-price {
    font-size: 16px;
    font-weight: 700;
    color: #854F0B;
    margin: 4px 0 2px;
}

.bl-chapter-lock-balance {
    font-size: 13px;
    margin: 0 0 8px;
}

.bl-chapter-lock form {
    margin: 2px 0 0;
}

.bl-chapter-lock-hint {
    font-size: 12px;
    margin-top: 12px;
}

.bl-chapter-content {
    padding: 22px 26px 26px;
    font-size: 15.5px;
    line-height: 2;
}

/* 上一章 / 返回目录 / 下一章 三等分按钮条（等宽居中，首末章禁用态占位保持视觉平衡；
   按钮只放「上一章/下一章」短文案+title 悬停完整标题，防长标题把按钮撑宽窄不一） */
.bl-chapter-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 18px 0;
    padding-top: 16px;
    border-top: 1px dashed var(--bd);
}

.bl-chapter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-s, 4px);
    text-decoration: none;
    font-size: 13px;
    color: var(--tx);
    background: var(--card);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s, color 0.15s;
}

a.bl-chapter-btn:hover {
    border-color: var(--ac-2);
    color: var(--ac-2);
}

.bl-chapter-btn.is-disabled {
    color: var(--tx-2, var(--tx));
    opacity: 0.45;
    cursor: default;
}

/* ---------- 同题材推荐 ---------- */

.bl-related {
    display: flex;
    flex-direction: column; /* 等宽纵列，防长短标题 flex-wrap 错位 */
    padding: 6px 10px 12px;
}

.bl-related-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 8px;
    text-decoration: none;
    border-bottom: 1px dashed var(--bd);
    border-radius: var(--radius-s, 4px);
}

.bl-related-item:last-child {
    border-bottom: 0;
}

.bl-related-item:hover .bl-related-title {
    color: var(--ac-2);
}

.bl-related-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tx);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bl-related-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.78;
}

.bl-side-links {
    padding: 12px 18px 16px;
}

.bl-side-links .btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* ---------- 发帖/编辑表单：封面上传 ---------- */

.bl-cover-edit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.bl-cover-prev {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 80px;
    border-radius: var(--radius-s, 4px);
    border: 1px solid var(--bd);
    object-fit: cover;
    background: var(--card);
}

.bl-cover-prev.is-empty {
    color: var(--tx-2, var(--tx));
    opacity: 0.55;
    background: var(--bd);
}

.bl-cover-ops {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.bl-cover-upload,
.bl-cover-clear {
    padding: 5px 14px;
    font-size: 12.5px;
    font-family: var(--sans);
    cursor: pointer;
    border-radius: var(--radius-s, 4px);
    white-space: nowrap;
}

.bl-cover-upload {
    color: #fff;
    background: var(--ac);
    border: 1px solid var(--ac);
}

.bl-cover-upload:hover {
    opacity: 0.9;
}

.bl-cover-upload.is-busy {
    opacity: 0.55;
    cursor: wait;
}

.bl-cover-clear {
    color: var(--tx-2, var(--tx));
    background: var(--card);
    border: 1px solid var(--bd);
}

.bl-cover-clear:hover {
    color: #791F1F;
    border-color: #F09595;
}

.bl-cover-hint {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.7;
}

/* ---------- 响应式 ---------- */

@media (max-width: 1024px) {
    .bl-cols {
        grid-template-columns: minmax(0, 1fr); /* 侧栏沉底单列 */
    }

    .bl-recommender {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .bl-hero {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .bl-cover {
        width: 120px;
    }

    .bl-cover img,
    .bl-cover .bl-cover-ph {
        width: 120px;
        height: 160px;
    }

    .bl-book-title {
        font-size: 20px;
    }

    /* 书架操作区窄屏微调：分段控件与按钮贴边距、字号略收 */
    .bl-seg-btn {
        padding: 6px 12px;
        font-size: 12.5px;
    }

    .bl-shelf-btn,
    .bl-shelf-continue,
    .bl-discuss-btn {
        padding: 6px 14px;
        font-size: 12.5px;
    }

    /* 列表封面缩略：窄屏略缩，占位等比跟随 */
    .bl-item-cover {
        width: 60px;
    }

    .bl-item-cover img,
    .bl-item-ph {
        height: 80px;
    }

    .bl-intro-body {
        padding: 10px 14px 14px;
    }

    .bl-toc-meta {
        display: none; /* 窄屏藏字数/日期，保标题可读 */
    }

    .bl-hero-cta {
        margin-top: 4px;
    }

    .bl-chapter-head h1 {
        font-size: 18px;
    }

    .bl-chapter-content {
        padding: 16px 16px 20px;
        font-size: 15px;
        line-height: 1.95;
    }

    .bl-chapter-nav {
        gap: 8px;
        margin: 6px 12px 0;
    }

    .bl-chapter-btn {
        font-size: 12.5px;
        padding: 9px 4px;
    }

    /* 付费购买卡窄屏收边距；目录付费/已购徽标保留（价格信息优先级高于字数/日期） */
    .bl-chapter-lock {
        margin: 12px 12px 0;
        padding: 32px 16px 28px;
    }
}

/* ============================================================
 * 独立发布入口（book-new.html）
 * ============================================================ */

/* 头部按钮组（headline 为 baseline 对齐，按钮组单独居中贴右）：
   单一 margin-left:auto 把整组推到最右，组内 gap 紧排——
   避免多个 auto margin 平分剩余空间造成按钮间大空隙（2026-10-21 实证：两个
   bl-board-btn 各带 auto 导致「评分榜 发布新书……购买记录 作者认证」两簇错位） */
.bl-headline-actions {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 「评分榜/购买记录」为查看类次级导航 → 描边幽灵样式，组内紧排；
   「发布新书」为创建类主操作 → 保持实心高优先级，压轴最右，主次分明 */
.bl-headline .bl-board-btn {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    background: transparent;
    color: var(--ac-2);
    border: 1px solid var(--ac-2);
}

.bl-headline .bl-board-btn:hover {
    background: rgba(232, 169, 58, 0.10);
}

.bl-headline .bl-publish-btn {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* 「作者认证」入口（未认证登录用户可见）：身份认证类引导 → 金色幽灵样式与评分榜同族，弱于发布主操作 */
.bl-headline .bl-verify-btn {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    background: transparent;
    color: var(--ac-2);
    border: 1px solid var(--ac-2);
}

.bl-headline .bl-verify-btn:hover {
    background: rgba(232, 169, 58, 0.10);
}

/* 发布表单：版块/分类下拉行 */
.bl-pub-top {
    align-items: flex-end;
    margin-bottom: 14px;
}

.bl-col-grow {
    flex: 1 1 180px;
}

.bl-pub .bl-col select {
    min-width: 160px;
    width: 100%;
    padding: 7px 10px;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--radius-s, 4px);
}

/* 必填星号（频道/完结状态/流派） */
.bl-req {
    color: #C0392B;
    margin-left: 2px;
    font-weight: 600;
}

/* ============================================================
 * 书籍详情页·读者评论区（book.php #bl-comments）
 * 交互与基础组件复用核心 app.css/app.js（post-actions / pa-btn
 * / like-post / reply-box / reply-quote 系列类名），此处仅补
 * 书单卡内布局：楼层列表 / 楼层卡 / 引用块 / 分页行
 * ============================================================ */

.bl-comments {
    margin-top: 16px;
}

/* 发表表单（挂在核心 reply-box 上，收窄内边距） */
.bl-cmt-form {
    padding: 14px 18px 14px;
}

.bl-cmt-input {
    display: block;
    width: 100%;
    min-height: 84px;
    padding: 10px 12px;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tx);
    background: var(--soft-2, #F5F4EE);
    border: 1px solid var(--bd);
    border-radius: var(--radius-s, 8px);
    resize: vertical;
}

.bl-cmt-input:focus {
    outline: none;
    border-color: var(--ac, #D97757);
}

/* 游客登录提示条 */
.bl-cmt-login {
    display: flex;
    justify-content: center;
    padding: 18px;
}

/* 楼层列表与楼层卡 */
.bl-cmt-list {
    padding: 12px 18px 10px;
}

.bl-cmt-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--bd);
}

.bl-cmt-item:last-child {
    border-bottom: 0;
}

.bl-cmt-avatar {
    flex: 0 0 auto;
    line-height: 0;
}

.bl-cmt-main {
    flex: 1 1 auto;
    min-width: 0; /* 长词/大图不撑破卡片 */
}

.bl-cmt-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* 评论者评分徽标：名字后 5 星展示（实星强调色/空星弱化，未评分不渲染） */
.bl-cmt-rate {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
}

.bl-cmt-rate .on {
    color: var(--ac-2);
}

.bl-cmt-rate .off {
    color: var(--bd);
    opacity: 0.8;
}

/* ---------- 首页「推荐书籍」区块（杂志式 1 大卡自动轮播 + 右列书卡竖向轮播） ---------- */

.bl-rec-headtools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bl-rec-body {
    display: flex;
    gap: 16px;
    padding: 14px 16px 16px;
    align-items: stretch;
}

/* 纯大卡形态（无小行可排）：舞台占满整行 */
.bl-rec-body.is-solo .bl-rec-stage {
    flex: 1;
}

/* 大卡舞台：多张置顶卡 grid 同格堆叠（切换不跳版）。
   卡片随右列书卡总高拉伸（对齐区块底边），封面按 3:4 跟随卡片高度自适应；
   占比 54%：封面变大后仍给信息列留足一行排开「作者 + 徽标 + 热度」的宽度（46% 时窄屏会换行错位） */
.bl-rec-stage {
    display: grid;
    flex: 0 0 54%;
    min-width: 0;
}

/* 大卡：左封面右信息（置顶书/热度第一；不整卡包链，按钮为独立链接）。
   非 active 卡右移淡出（visibility 保无障碍），切换时 active 从右往左滑入；
   按日定位首轮主打 + 自动轮播（间隔后台可配，悬停暂停）。
   min-height 为内容驱动场景（无右列/无 JS）保底大卡体量 */
.bl-rec-big {
    grid-area: 1 / 1;
    display: flex;
    gap: 16px;
    min-width: 0;
    min-height: 193px;
    padding: 14px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-s);
    background: var(--soft-2);
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.bl-rec-big:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .bl-rec-big,
    .bl-rec-track {
        transition: none;
    }
}

/* 封面锚点：跨轴拉伸占满大卡内高，宽由 3:4 比例推出（右列越高封面越大，底边恒与按钮行对齐） */
.bl-rec-big-cover {
    flex: none;
    width: auto;
    align-self: stretch;
    aspect-ratio: 3 / 4;
}

.bl-rec-big-cover img,
.bl-rec-cfirst {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 无封面首字彩块（与书架广场同口径：衬线白字 + 低饱和暖色底） */
.bl-rec-cfirst {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.bl-rec-cfirst.is-s {
    position: absolute;
    inset: 0;
    font-size: 26px;
    border-radius: 0;
}

.bl-rec-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    overflow: hidden;
}

.bl-rec-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tx);
    text-decoration: none;
    line-height: 1.35;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-rec-title:hover {
    color: var(--ac);
}

.bl-rec-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
}

.bl-rec-author {
    font-size: 13px;
    color: var(--tx-2);
}

.bl-rec-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx-3);
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA：贴信息列底部（与封面底边同一水平线，margin-top:auto 定位）并靠右收尾 */
.bl-rec-btns {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
}

.bl-rec-go {
    flex: none;
}

/* 右列：热度书卡竖向轮播（横排卡 = 3:4 封面 + 书名/作者/徽标/两行简介 + 封面热度角标）
   1 本静态展示；满 2 本 JS 加 is-scroll 固定可见窗口（2 张）从下往上步进滚动，末尾克隆无缝回环 */
.bl-rec-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bl-rec-track {
    display: flex;
    flex-direction: column;
    gap: 10px;
    will-change: transform;
    transition: transform 0.5s ease;
}

/* 轮播态：裁切窗口，高度由 JS 实测设置（2 张卡高 + 间隙，随断点自适应） */
.bl-rec-list.is-scroll {
    overflow: hidden;
    justify-content: flex-start;
    padding-top: 3px; /* 首卡悬停上浮余量：避免 translateY(-2px) 被 overflow 裁掉顶边 */
}

.bl-rec-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-s);
    text-decoration: none;
    background: var(--card);
    box-shadow: 0 1px 4px rgba(90, 62, 27, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bl-rec-item:hover {
    border-color: var(--ac);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(90, 62, 27, 0.18);
}

/* 书卡封面：固定 3:4 竖版（占位首字块与 img 双层填充，同书架口径；热度角标挂右上角） */
.bl-rec-item-cover {
    position: relative;
    flex: none;
    width: 70px;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--bd);
    background: var(--soft-2);
}

.bl-rec-item-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-rec-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* 头部行：书题居左，连载徽标贴卡片右缘（与书题垂直居中，替代原作者后随排） */
.bl-rec-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
}

.bl-rec-item-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1.4;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 徽标不收缩：空间不足时由书题省略号兜底 */
.bl-rec-item-head .bl-tag {
    flex: none;
    padding: 1px 6px;
    font-size: 10.5px;
}

.bl-rec-item:hover .bl-rec-item-title {
    color: var(--ac);
}

.bl-rec-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
}

.bl-rec-item-author {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--tx-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 书卡简介：两行截断（通栏卡自然两行，两列窄卡由行宽再收） */
.bl-rec-item-intro {
    font-size: 12px;
    line-height: 1.55;
    color: var(--tx-3);
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 小卡热度：封面右上角圆角角标（排序依据可视化，不占信息行） */
.bl-rec-heat {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #B45309;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

@media (max-width: 720px) {
    .bl-rec-body {
        flex-direction: column;
        padding: 12px 12px 14px;
        gap: 10px;
    }

    .bl-rec-stage {
        flex: none;
        width: auto;
    }

    .bl-rec-item-cover {
        width: 58px;
    }

    .bl-rec-item-intro {
        -webkit-line-clamp: 1;
    }
}

/* 评论头部：徽标/昵称/评分星 组内横向排列，统一 6px 间隔（顺序：作者徽标 → 昵称 → 星） */
.bl-cmt-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
}

.bl-cmt-name a {
    color: var(--tx);
}

/* 楼层作者（= 推荐人）标记 */
.bl-tag-author {
    color: var(--ac-2, #C4633F);
    border-color: var(--ac, #D97757);
    background: var(--ac-soft, #F9E9E2);
}

.bl-cmt-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--tx-3, #8A8672);
}

/* 被引楼层摘要 */
.bl-cmt-quote {
    margin: 8px 0 2px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--tx-2, #57544A);
    background: var(--soft-2, #F5F4EE);
    border-left: 3px solid var(--bd-2, #DDD9CB);
    border-radius: 0 var(--radius-s, 8px) var(--radius-s, 8px) 0;
    overflow: hidden;
}

.bl-cmt-content {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}

.bl-cmt-content img {
    max-width: 100%;
}

/* 操作行复用核心 .post-actions/.pa-btn，仅补间距 */
.bl-cmt-actions {
    margin-top: 6px;
}

/* 分页行（cpage 独立分页，保留目录 page 参数） */
.bl-cmt-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 2px 18px 16px;
}

/* hero CTA 行内的收藏/送花按钮组（复用核心 .thread-actions/.action-btn 交互与外观，
   覆盖帖子页的卡片级布局：去分割线与外边距，改为行内组） */
.bl-thread-actions {
    padding: 0;
    border-top: 0;
    margin-top: 0;
    flex-wrap: nowrap;
}

/* 移动端（对齐主题 720px 断点）：时间戳随 head 自动换行 */
@media (max-width: 720px) {
    .bl-cmt-item {
        gap: 10px;
        padding: 12px 0;
    }

    .bl-cmt-form,
    .bl-cmt-list,
    .bl-cmt-pager {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ---------- 书单库顶部主打轮播（Hero，与首页大卡同版式：左封面右信息，无 tab 自动轮播） ---------- */
.bl-hero {
    overflow: hidden; /* card 圆角裁切渐变底与封面投影 */
}

/* Hero 双栏主体：左主打大卡 + 右热度书卡竖向轮播（与首页推荐同构，Hero 保留渐变横幅质感） */
.bl-hero-body {
    display: flex;
    gap: 14px;
    align-items: stretch;
    min-width: 0;
}

.bl-hero-body.is-solo .bl-hero-stage {
    flex: 1; /* 无右列书卡时大卡占满整行 */
}

/* 单栏兜底体量：无右列参照时 Hero 仍保持横幅高度（封面约 222×166） */
.bl-hero-body.is-solo .bl-hero-item {
    min-height: 250px;
}

.bl-hero-stage {
    display: grid; /* 多卡同格堆叠，高度取最高卡，切换不跳版（与首页大卡同法） */
    flex: 0 0 54%;
    min-width: 0;
}

/* 右列滚动窗口在较高的 Hero 内垂直居中（窗口 = 2 张卡，Hero 由 224 封面撑到 ~268） */
.bl-hero .bl-rec-list.is-scroll {
    align-self: center;
}

.bl-hero-item {
    grid-area: 1 / 1;
    display: flex;
    gap: 16px;
    min-width: 0;
    padding: 14px 16px;
    background:
        linear-gradient(135deg, var(--bl-hero-c, #E4ECF5) 0%, transparent 62%),
        var(--soft-2);
    border-radius: var(--radius-s);
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
}

.bl-hero-item:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    transform: translateX(36px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .bl-hero-item {
        transition: none;
    }
}

.bl-hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    overflow: hidden;
}

.bl-hero-title {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--tx);
    text-decoration: none;
    line-height: 1.4;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-hero-title:hover {
    color: var(--ac);
}

.bl-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.bl-hero-author {
    font-size: 13.5px;
    color: var(--tx-2);
}

.bl-hero-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--tx-3);
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA：贴信息列底部靠右（与首页大卡按钮同位：底边与封面底边对齐） */
.bl-hero-btns {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bl-hero-go {
    flex: none;
}

/* 封面锚点：跨轴拉伸占满 Hero 内高、宽由 3:4 推出（与首页大卡同法）——
   双栏时区块高度由右列书卡窗口决定，封面随之自适应，两侧底边天然对齐 */
.bl-hero-cover {
    flex: none;
    width: auto;
    align-self: stretch;
    aspect-ratio: 3 / 4;
    display: block;
}

.bl-hero-cover img,
.bl-hero-cfirst {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 无封面首字彩块（底色用该书彩块色，与首页推荐/书架广场同口径） */
.bl-hero-cfirst {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    background: var(--bl-hero-c, #E4ECF5);
}

@media (max-width: 720px) {
    /* Hero：双栏改上下堆叠——封面置顶横幅裁切（保留封面上部书名区），信息在下，右列书卡随后 */
    .bl-hero-body {
        flex-direction: column;
    }

    .bl-hero-stage {
        flex: none;
        width: auto;
    }

    .bl-hero .bl-rec-list.is-scroll {
        align-self: stretch;
    }

    .bl-hero-item {
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }

    .bl-hero-cover {
        width: 100%;
        align-self: auto;
        aspect-ratio: auto; /* 解除桌面端的 3:4 拉伸，移动端由 img 定高 190px 控制 */
    }

    .bl-hero-cover img,
    .bl-hero-cfirst {
        width: 100%;
        height: 190px;
        object-position: 50% 28%; /* 竖封裁中间偏上，书名区不丢 */
    }

    .bl-hero-title {
        font-size: 19px;
    }

    .bl-hero-intro {
        -webkit-line-clamp: 2;
    }
}

/* ---------- 书籍评分榜（book-rating.html） ---------- */

.blr-guide {
    display: flex;
    justify-content: center;
    padding: 4px 0 16px;
}

/* TOP3 领奖台：三列，冠军居中（视觉第 2-1-3 排布） */
.blr-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 18px;
    align-items: end;
}

.blr-pod {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 12px 14px;
    border: 1px solid var(--bd);
    border-radius: var(--radius);
    background: var(--bg-2, var(--card));
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blr-pod:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(31, 78, 121, 0.12);
}

/* 冠军卡放大居中，两侧次之 */
.blr-rank-1 {
    grid-column: 2;
    padding-top: 22px;
    border-color: #E8C34A;
    background: linear-gradient(180deg, rgba(232, 195, 74, 0.10), transparent 46%);
}

.blr-rank-2 {
    grid-column: 1;
}

.blr-rank-3 {
    grid-column: 3;
}

.blr-pod-medal {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #FFF;
    background: #9AA4AE;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.blr-rank-1 .blr-pod-medal {
    background: #E8C34A;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.blr-rank-2 .blr-pod-medal {
    background: #B7BEC6;
}

.blr-rank-3 .blr-pod-medal {
    background: #C98A5B;
}

.blr-pod-cover {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-2, #F5F6F8);
    border: 1px solid var(--bd);
}

.blr-pod-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blr-cover-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--tx-2, var(--tx));
    opacity: 0.4;
}

.blr-pod-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    min-width: 0;
}

.blr-pod-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

.blr-pod-score b {
    font-size: 26px;
    font-weight: 800;
    color: var(--ac-2);
    line-height: 1;
}

.blr-pod-score small {
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.7;
}

.blr-pod-meta {
    font-size: 11.5px;
    color: var(--tx-2, var(--tx));
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 星级（实星/空星双色；领奖台与榜单行共用） */
.blr-stars {
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
}

.blr-stars .on {
    color: #E8A93A;
}

.blr-stars .off {
    color: var(--bd);
}

/* 完整榜单行（4-50 名） */
.blr-rows {
    display: flex;
    flex-direction: column;
}

.blr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--bd);
    text-decoration: none;
}

.blr-row:last-child {
    border-bottom: 0;
}

.blr-row:hover {
    background: var(--bg-2, var(--bg));
}

.blr-no {
    flex: 0 0 26px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--tx-2, var(--tx));
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.blr-row-cover {
    flex: 0 0 42px;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
    overflow: hidden;
    background: var(--bg-2, #F5F6F8);
    border: 1px solid var(--bd);
}

.blr-row-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blr-row-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.blr-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.blr-row-title > :first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.blr-row-meta {
    font-size: 12px;
    color: var(--tx-2, var(--tx));
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blr-row-score {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blr-row-score b {
    font-size: 16px;
    font-weight: 800;
    color: var(--ac-2);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .blr-podium {
        grid-template-columns: 1fr;
        padding: 14px 12px;
        gap: 16px;
    }

    .blr-rank-1,
    .blr-rank-2,
    .blr-rank-3 {
        grid-column: auto;
    }

    .blr-row {
        padding: 10px 12px;
        gap: 10px;
    }

    .blr-row-score .blr-stars {
        display: none;
    }
}

/* ==================== 书的门：访问控制（加密锁条目 / 提取码门页 / 权限表单区） ==================== */

/* 列表匿名锁条目：不露书名/作者/封面（斜纹底与正常条目区分） */
.bl-item-locked .bl-lock-cover {
    cursor: default;
}

.bl-item-locked .bl-item-ph {
    background: repeating-linear-gradient(135deg, var(--bd), var(--bd) 7px, rgba(0, 0, 0, 0.03) 7px, rgba(0, 0, 0, 0.03) 14px);
}

.bl-lock-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

.bl-item-meta {
    margin: 4px 0 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tx-2, var(--tx));
}

/* 锁条目输码表单：码框 + 解锁钮 */
.bl-unlock-form {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.bl-unlock-form input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.bl-unlock-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #FFF;
    background: var(--ac-2);
    border: 1px solid var(--ac-2);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
}

.bl-unlock-btn:hover {
    filter: brightness(1.08);
}

/* 提取码门页（book-gate）：居中卡片 */
.bl-gate {
    max-width: 460px;
    margin: 40px auto;
    padding: 34px 28px 28px;
    text-align: center;
}

.bl-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
    color: var(--ac-2);
    background: rgba(198, 120, 42, 0.1);
    border-radius: 16px;
}

.bl-gate-title {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--tx);
}

.bl-gate-tip {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--tx-2, var(--tx));
}

.bl-gate-err {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 8px 12px;
    font-size: 13px;
    color: #B3462F;
    background: rgba(179, 70, 47, 0.08);
    border: 1px solid rgba(179, 70, 47, 0.3);
    border-radius: 8px;
}

.bl-gate-form {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.bl-gate-input {
    flex: 1 1 0;
    min-width: 0;
    max-width: 200px;
    padding: 9px 12px;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
}

.bl-gate-hint {
    margin: 14px 0 0;
    font-size: 12px;
    opacity: 0.65;
}

/* 发布/编辑表单：访问权限区
   bl-line 是无 wrap 的 flex 容器：提示文字与附加行必须整行换行（flex-basis 100% 依赖容器 wrap），
   否则会挤在单选项右侧被压缩成窄竖条——选项文字加宽（加密→内容加密）后错位恶化暴露 */
.bl-access-zone {
    flex-wrap: wrap;
}

.bl-access-zone .bl-radios {
    flex-wrap: wrap;
    row-gap: 6px;
}

.bl-access-zone .bl-access-extra {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
}

/* 主标签取消通用 8px 下推（那是给右侧输入框行设计的；权限区右侧是贴顶的单选行，下推后与选项文字错位半行） */
.bl-access-zone > .bl-sub {
    padding-top: 0;
}

.bl-access-extra .bl-sub {
    padding-top: 0;
}

.bl-access-code {
    max-width: 140px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    background: rgba(198, 120, 42, 0.06);
}

.bl-access-extra .bl-cover-hint {
    margin: 0;
}

/* ============================================================
 * 章节购买记录（booklist-purchases.html）——订单/账单视觉
 * 概览面板（三格数字 KPI） + 订单卡（订单头条含小计） + 表格化明细流水
 * ============================================================ */

.bl-purch-hero {
    margin-bottom: 14px;
}

.bl-purch-hero-t {
    padding: 16px 18px 0;
}

.bl-purch-hero-t h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--serif, serif);
    font-size: 18px;
    color: var(--text);
}

.bl-purch-hero-t p {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.bl-purch-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 14px 18px 16px;
}

.bl-purch-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 12px 14px;
    background: linear-gradient(135deg, #FFFDF8 0%, #FBF4E4 100%);
    border: 1px solid rgba(198, 120, 42, 0.22);
    border-radius: 10px;
}

.bl-purch-kpi-n {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: #854F0B;
    word-break: break-all;
}

.bl-purch-kpi-l {
    font-size: 12px;
    color: var(--muted);
}

/* ---- 订单卡 ---- */

.bl-purch-order {
    margin-bottom: 14px;
    overflow: hidden; /* 圆角裁切订单头条的整宽底色 */
}

/* 订单头条：书名 + 已购 N 章（左） | 小计（右） */
.bl-purch-oh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 11px 16px;
    background: linear-gradient(135deg, #FFFDF8 0%, #FBF4E4 100%);
    border-bottom: 1px solid var(--line);
}

.bl-purch-oh-l {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.bl-purch-oh-book {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

a.bl-purch-oh-book:hover {
    color: var(--primary);
}

.bl-purch-oh-sub {
    font-size: 12px;
    color: var(--muted);
}

.bl-purch-oh-r {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}

.bl-purch-oh-lbl {
    font-size: 12px;
    color: var(--muted);
}

.bl-purch-oh-sum {
    font-size: 15px;
    font-weight: 700;
    color: #854F0B;
    font-variant-numeric: tabular-nums;
}

/* ---- 明细流水：列头与数据行同 grid 列宽 ---- */

.bl-purch-cols,
.bl-purch-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 132px 72px;
    align-items: center;
    gap: 10px;
}

.bl-purch-cols {
    padding: 8px 16px;
    font-size: 11.5px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.bl-purch-cols span + span,
.bl-purch-list li .bl-purch-price,
.bl-purch-list li .bl-purch-time {
    text-align: right;
}

.bl-purch-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bl-purch-list li {
    padding: 9px 16px;
    border-bottom: 1px dashed var(--line);
}

.bl-purch-list li:last-child {
    border-bottom: 0;
}

.bl-purch-ch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
}

a.bl-purch-ch:hover .bl-purch-title {
    color: var(--primary);
}

.bl-purch-no {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 999px;
}

.bl-purch-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-purch-price {
    font-weight: 600;
    color: #854F0B;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.bl-purch-time {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* 交易状态 pill：已完成（绿）/ 已失效（灰） */
.bl-purch-st {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.bl-purch-st.is-ok {
    color: #2E7D32;
    background: rgba(46, 125, 50, 0.10);
}

.bl-purch-st.is-off {
    color: #8A7F6E;
    background: rgba(138, 127, 110, 0.12);
}

/* 窄屏：隐藏列头，明细行两行布局（章节占整行；价格/时间/状态收第二行，金额贴右） */
@media (max-width: 720px) {
    .bl-purch-cols {
        display: none;
    }

    .bl-purch-list li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 10px;
    }

    .bl-purch-ch {
        flex: 1 1 100%;
        min-width: 0;
    }

    .bl-purch-time {
        order: 2;
        text-align: left;
    }

    .bl-purch-st {
        order: 3;
        justify-self: auto;
    }

    .bl-purch-price {
        order: 4;
        margin-left: auto;
        text-align: right;
    }
}