/* ==========================================================================
   moge2「夜航书港」站点定制层
   在模板自带的 home.css / style.css 之后加载，用于承载我们的数据适配。
   —— 不改模板原文件，便于模板升级时直接覆盖。
   ========================================================================== */

/* ---------- 书封组件：支持真实封面图 ---------- */
/* 模板原生的 .bkc 是纯 CSS 文字封面（渐变底 + 书名 + 作者 + 角标）。
   有真实封面时用图片覆盖，并隐藏装饰层。 */
.bkc > img.bkc-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  z-index:3;
}
.bkc:has(> img.bkc-img)::before,
.bkc:has(> img.bkc-img)::after{ display:none }

/* ---------- 长文本约束（全站）---------- */
/* 模板注释写明「超长自动省略」，但列表类卡片仍需兜底，防止真实数据撑破布局 */
.c-t-n,
.rec-h h3,
.fin-i h3,
.hot-n,
.newin-n{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.c-t-c{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.c-feat-i b a{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* 最近更新：长书名/长章节名截断 */
.upd-t .bk-name{ max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.upd-a{ max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---------- 无真实封面时的书名：单列截断，不越出书封 ---------- */
.bkc-t{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}


/* ==========================================================================
   内页组件色调桥接
   --------------------------------------------------------------------------
   模板里首页（home.css，青绿+金，冷调）与内页（style.css，宣纸+朱砂，暖调）
   是两套独立配色。全站统一用首页外壳，这里把内页组件用到的暖色变量
   重新映射到冷色调，避免出现「页面一半青绿一半朱砂」。
   ========================================================================== */
:root{
  --paper-2:#eceae4;
  --line-soft:rgba(26,34,36,.07);
  --cinnabar:#155e52;        /* 朱砂 -> 青绿 */
  --cinnabar-deep:#0c4239;
  --ochre:#c08a2d;           /* 赭石 -> 金 */
  --pine:#5f6f5b;
  --shadow:0 10px 30px -12px rgba(14,22,24,.22);
}

/* 内页书封组件 .cov：支持真实封面图 */
.cov > img.cov-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block;
}
.cov:has(> img.cov-img) .cov-t,
.cov:has(> img.cov-img) .cov-a{ display:none }
.cov-t{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}

/* 书籍页：作者名/分类等长文本兜底 */
.d-author a{ word-break:break-word }
.chap-list a{ overflow:hidden; text-overflow:ellipsis }
.mini h3 a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.review-b > p{ word-break:break-word }

/* 相关推荐（书籍页底部）也复用首页的 6 列栅格观感 */
.mini-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px }
@media (max-width:1100px){ .mini-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width:760px){ .mini-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:480px){ .mini-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }


/* ---------- 侧栏榜单/作者列表：长书名必须截断 ---------- */
/* 实测问题：真实书名可达 48 字（如「一个讨饭的脏乞丐捡到采补玉简…」），
   在窄侧栏里换行后撑破行高，与下一行重叠。 */
.rk-n,
.rk-m,
.board-n,
.board-m{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.rk-n{ max-width:132px }
.rk-m{ max-width:104px }
.board-n{ max-width:56% }
.board-m{ max-width:34% }


/* ==========================================================================
   全模块标题截断（按模块宽度自适应）
   --------------------------------------------------------------------------
   背景：真实书名可以非常长（实测 48 字，如「一个讨饭的脏乞丐捡到采补玉简…」）。
   模板自带的省略规则只覆盖了部分类名，长标题仍会把卡片/栅格撑开，
   表现为「布局沾满整屏」。

   两条铁律：
     1) flex / grid 子项必须 min-width:0，否则内容会撑破容器（默认 min-width:auto）；
     2) 单行用 nowrap + ellipsis，多行用 -webkit-line-clamp；
        非 -webkit 分支回退到 max-height，保证不塌。
   ========================================================================== */

/* ---------- 通用：让所有可能承载长文本的容器可收缩 ---------- */
.rec-card, .rec-top, .rec-h, .rec-d, .rec-last,
.hot-list li, .newin-list li, .fin-card, .fin-i,
.cate-group, .cate-books li, .c-t-l, .c-feat-i,
.upd-list li, .upd-mid, .upd-t, .upd-side,
.list-row, .list-row > div,
.mini, .mini h3, .mini p,
.board-list li, .rank-list li, .widget,
.col-main, .col-side, .main-col, .side-col{
  min-width: 0;
}

/* ---------- 单行截断工具（模块内标题统一走这里） ---------- */
.rec-h h3,
.c-t-n,
.fin-i h3,
.hot-n,
.newin-n,
.upd-t .bk-name,
.upd-ch,
.upd-d,
.upd-a,
.rk-n,
.rk-m,
.board-n,
.board-m,
.list-row h2 a,
.lr-m,
.lr-new,
.mini h3 a,
.chap-list a,
.crumb li,
.c-feat-i b a,
.c-feat-m,
.fin-ch,
.hot-st,
.newin-st{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 多行截断（窄卡片给 2 行，宽容器给 1~2 行） ---------- */
.rec-d,                      /* 本期推荐简介 */
.mini p,                     /* 相关推荐 meta */
.lr-d{                       /* 列表页简介 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-d{ -webkit-line-clamp: 2; max-height: 3.2em }
.lr-d{ -webkit-line-clamp: 2; max-height: 3.2em }
.mini p{ -webkit-line-clamp: 1; max-height: 1.7em }

/* ---------- 书封文字（纯 CSS 封面）绝不越出书封 ---------- */
.bkc-t, .cov-t{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  max-height: 100%;
}
.bkc-t{ -webkit-line-clamp: 3 }
.cov-t{ -webkit-line-clamp: 4 }

/* ---------- 首屏轮播标题：独占一行，超长截断 ---------- */
.car-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.car-desc{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 书籍详情页 ---------- */
.d-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.d-last a{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
  display: inline-block;
  vertical-align: bottom;
}
.d-tags{ overflow: hidden }

/* ---------- 章节阅读页 ---------- */
.rd-head h1{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.rt-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.drawer-list a{
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-list a{
  overflow: hidden;
}
.drawer-list a > time{ flex: none; margin-left: auto }
.drawer-list a{
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 分类/排行侧栏：窄栏位限宽 ---------- */
.col-side .hot-n, .side-col .rk-n, .col-side .newin-n{ max-width: 100% }

/* ---------- 分页条不换行 ---------- */
.pager{ flex-wrap: wrap; row-gap: 6px }


/* ==========================================================================
   横向列表行（榜单/热门/最新）：修正 flex 收缩
   --------------------------------------------------------------------------
   模板问题：
     · .hot-n 在 home.css 里【完全没定义】→ flex 子项默认 min-width:auto，
       会撑到内容宽度，长书名直接把整行顶出面板；
     · .hot-st / .hot-a 是 flex:none，不收缩，且 .hot-st 没有 max-width，
       「更至第7章 想要从男孩的大肉棒下夺回母猪…」这类长章节名一路顶出去。
   统一策略：标题可伸缩（flex:1 + min-width:0），后缀限宽且不换行。
   ========================================================================== */
.hot-list li,
.newin-list li,
.board-list li,
.rank-list li{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 标题：占据剩余空间，可收缩，超出省略 */
.hot-n,
.newin-n,
.board-n,
.rk-n{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 状态/章节名后缀：限宽 + 不收缩到撑破 */
.hot-st,
.newin-st,
.board-m,
.rk-m{
  flex: 0 1 auto;
  min-width: 0;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

/* 作者列：限宽 */
.hot-a,
.board-h2,
.rk-h{
  flex: 0 1 auto;
  min-width: 0;
  max-width: 22%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 窄侧栏（首页 aside / 内页 side-col）里再收紧一档 */
.col-side .hot-n, .col-side .newin-n, .side-col .rk-n, .side-col .board-n{ max-width: 100% }
.col-side .hot-st, .side-col .rk-m{ max-width: 30% }
.col-side .hot-a{ max-width: 26% }

/* ---------- 本期推荐 / 完本排行 卡片内文字 ---------- */
.rec-h{ min-width: 0; flex: 1 }
.rec-h h3{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.rec-tag{ flex-wrap: wrap; row-gap: 2px }
.rec-meta{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fin-i{ min-width: 0; flex: 1 }
.fin-i h3{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }


/* ---------- 分类阅读：空分类占位 ---------- */
/* 分类与导航一一对应，暂时没有作品的分类渲染这句提示而不是整块消失 */
.cate-empty{
  margin: 10px 0 4px;
  padding: 18px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}
.cate-empty a{ color: var(--teal) }

/* ---------- 侧栏 APP 块：与同栏其它面板对齐 ---------- */
/* .app2 在 home.css 里是 border:0，比其它 panel 宽 2px 且左边缘不齐；
   这里补一条透明边框 + 统一的盒模型，保证四边和热门作品/热门标签对齐。 */
.col-side .panel.app2,
.side-col .panel.app2{
  border: 1px solid transparent;
  box-sizing: border-box;
  width: 100%;
}

/* cat2col-fix 作品目录两列 */
.chap-list{grid-template-columns:1fr 1fr !important;column-gap:44px}
@media(max-width:700px){.chap-list{grid-template-columns:1fr !important}}

/* marquee-fix 推荐阅读一行跑马灯 */
.tuijian,.tj-bar,.rec-bar{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap}
.tuijian .tj-list,.tj-bar .tj-list,.rec-bar .rec-list{
  display:flex;gap:22px;white-space:nowrap;animation:zl-marquee 38s linear infinite;will-change:transform}
.tuijian:hover .tj-list,.tj-bar:hover .tj-list,.rec-bar:hover .rec-list{animation-play-state:paused}
@keyframes zl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* zl-pager 章节翻页 */
.zl-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  padding:20px 0;margin-top:18px;border-top:1px solid rgba(0,0,0,.07)}
.zl-pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:36px;
  padding:0 13px;border:1px solid rgba(0,0,0,.12);border-radius:8px;font-size:13.5px;
  color:inherit;text-decoration:none;transition:.18s}
.zl-pg:hover{border-color:currentColor;opacity:.82}
.zl-pg.on{background:#0f766e !important;color:#ffffff !important;border-color:transparent !important;font-weight:700}
.zl-pg-info{font-size:12.5px;opacity:.55;margin-left:6px}
@media(max-width:560px){.zl-pg{min-width:34px;height:33px;padding:0 10px;font-size:12.5px}}

.appdl{max-width:720px;margin:0 auto;padding:26px 24px;border-radius:16px;
  background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.09)}
.appdl-hd b{display:block;font-size:20px;font-weight:800;margin-bottom:6px}
.appdl-hd span{display:block;font-size:13px;opacity:.66;line-height:1.7}
.appdl-btns{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 16px}
.appdl-btn{display:inline-flex;align-items:center;justify-content:center;min-width:172px;
  padding:13px 26px;border-radius:999px;font-size:14.5px;font-weight:700;
  border:1px solid rgba(0,0,0,.16);color:inherit;text-decoration:none;transition:.2s}
.appdl-btn.is-main{background:linear-gradient(135deg,#f0b429,#d98c11);border-color:transparent;color:#2a1a05}
.appdl-btn:hover{transform:translateY(-2px);opacity:.94}
.appdl-steps{margin:0 0 14px;padding-left:20px;font-size:13.5px;line-height:2;opacity:.82}
.appdl-note{font-size:12.5px;opacity:.56;line-height:1.75;margin:0}
@media(max-width:560px){
  .appdl{padding:20px 16px}
  .appdl-btn{flex:1;min-width:0;padding:12px 16px;font-size:13.5px}
}

/* moge2 inline-style extract */
.moge2-s1{margin-top:18px}
.moge2-s2{margin-top:26px}
.moge2-s3{padding:18px 22px;line-height:2.1;font-size:14px}
.moge2-s4{padding:18px 22px;line-height:2.15;font-size:14px}
.moge2-s5{--cbg:#155e52}
.moge2-s6{margin-top:16px}
.moge2-s8{min-width:0;flex:1}
.moge2-s9{padding:40px 0;text-align:center}
.moge2-s11{padding:40px;text-align:center}
.moge2-s12{display:flex;gap:10px;max-width:460px;margin:0 auto}
.moge2-s13{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.moge2-s14{margin-top:14px;font-size:13px}
.moge2-s15{color:var(--teal)}
.moge2-s16{margin-bottom:12px}
.moge2-s17{font-size:13px;margin-top:8px}
.moge2-s19{font-size:13px}
.moge2-s20{margin-top:52px}
.moge2-s22{margin-top:36px}
.moge2-s25{margin-top:8px}
.moge2-s26{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;display:inline-flex;align-items:center;gap:6px;background:none;cursor:pointer}
.moge2-s27{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%}
.moge2-s28{margin:24px 0}
.moge2-s29{width:32px;height:32px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.moge2-s33{border-bottom-color:rgba(255,255,255,.1)}
.moge2-s34{max-width:420px;margin:60px auto}
.moge2-s35{padding:32px}
.moge2-s36{margin:0 0 6px;font-family:var(--serif);font-size:24px}
.moge2-s37{margin-bottom:20px}
.moge2-s38{color:var(--cinnabar);font-size:13.5px;margin-bottom:12px}
.moge2-s39{display:block;margin-bottom:14px}
.moge2-s40{display:block;font-size:13.5px;margin-bottom:6px}
.moge2-s41{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.moge2-s42{display:block;margin-bottom:18px}
.moge2-s43{width:100%}
.moge2-s44{margin-top:16px;font-size:13.5px;text-align:center}
.moge2-s46{margin-bottom:14px}
.moge2-s48{margin-top:22px}
.moge2-s49{aspect-ratio:3/4;overflow:hidden;border-radius:8px}
.moge2-s50{margin-top:20px}
.moge2-s51{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:14px}
.moge2-s52{padding:40px 0;text-align:center;color:var(--ink3)}
.moge2-s53{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:24px 0}

/* moge2 page-style 搬迁 */
块里的 CSS 一律用单大括号。
   */
  $site = app('currentSite');
  $ub = $ub ?? \App\Support\UrlBuilder::forSite($site);

  $all = \App\Models\Category::where('site_id', $site->id)->orderBy('sort_no')->orderBy('id')->get();

  // 一次查询算完全部分类的在架作品数，避免 N+1
  $counts = \Illuminate\Support\Facades\DB::table('book_publication_category as bpc')
      ->join('book_publication as bp', 'bp.id', '=', 'bpc.publication_id')
      ->where('bp.site_id', $site->id)
      ->where('bp.status', 1)
      ->groupBy('bpc.category_id')
      ->selectRaw('bpc.category_id as cid, count(*) as n')
      ->pluck('n', 'cid')
      ->toArray();

  $cats = $all->sortByDesc(function ($c) use ($counts) {
      return $counts[$c->id] ?? 0;
  })->values();

  $total = array_sum($counts);
  $nonEmpty = 0;
  foreach ($cats as $c) { if (($counts[$c->id] ?? 0) > 0) $nonEmpty++; }

  $pal = [['#1b3a4b','#0f2733'],['#2c3e58','#182338'],['#6b4f22','#3d2c10'],['#5c3226','#331a12'],
          ['#4f5d3a','#2f3a22'],['#3d4a42','#202a24'],['#4a3560','#2a1d38'],['#155e52','#0c4239']];
@endphp

@section('title', '全部小说分类 - '.$site->name.'_按题材找书')
@section('description', $site->name.'共有 '.count($cats).' 个小说分类，收录 '.$total.' 部在架作品。按玄幻、武侠、都市、历史、悬疑、科幻等题材浏览，快速找到你想看的小说。')
@section('keywords', '小说分类,题材分类,'.collect($cats)->pluck('name')->take(10)->implode(',').','.$site->name)
@section('canonical_path', '/categories')

@section('head_extra')
  <style>
    .cats-page{max-width:1180px;margin:0 auto;padding:22px 16px 56px}
    .cats-hd{margin-bottom:22px}
    .cats-hd h1{font-size:24px;font-weight:900;color:var(--ink)}
    .cats-hd p{margin-top:8px;font-size:13.5px;color:var(--muted)}
    .cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .cat-card{display:flex;align-items:center;gap:12px;padding:16px 14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:transform .16s,border-color .16s}
    .cat-card:hover{transform:translateY(-2px);border-color:var(--brand)}
    .cat-ico{width:42px;height:42px;border-radius:11px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:900}
    .cat-info{min-width:0;flex:1}
    .cat-info b{display:block;font-size:15px;color:var(--ink);font-weight:800}
    .cat-info span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
    .cat-card.is-empty{opacity:.55}
    .cats-tip{margin-top:26px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:13.5px;color:var(--muted);line-height:1.9}
    @media(max-width:900px){.cats-grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:640px){.cats-grid{grid-template-columns:repeat(2,1fr)}.cats-hd h1{font-size:20px}}

/* moge2 inline-style pass3 */
.moge2-u1{color:var(--teal)}
.moge2-u2{max-width:100%;display:block;margin:0 auto 10px}

/* moge2 layout+page style */
.moge2-l1{margin-right:8px}
.moge2-l2{text-align:right;margin:16px 0 0}
.moge2-l3{font-size:13.5px;color:#525d5c;line-height:1.9;white-space:pre-line;margin:0}
.moge2-l4{margin:0 0 10px;font-family:var(--serif);font-size:19px}
.moge2-l5{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:24px;box-shadow:0 24px 60px -24px rgba(14,22,24,.5)}
.moge2-l6{position:fixed;inset:0;background:rgba(5,10,11,.55);display:grid;place-items:center;z-index:200;padding:20px}
.moge2-l7{color:inherit;opacity:.75;text-decoration:none}
.moge2-l8{color:inherit;text-decoration:none}
.moge2-l9{font-size:12.5px;opacity:.45;margin-top:10px}
.moge2-l10{color:var(--teal);flex:none}
.moge2-l11{flex:1;min-width:0}
.moge2-l12{flex:none}
.moge2-l13{display:flex;align-items:center;gap:10px;padding:9px 22px;font-size:13px}
.moge2-l14{background:linear-gradient(90deg,rgba(21,94,82,.1),rgba(192,138,45,.1));border-bottom:1px solid var(--line)}

/* 通用翻页 pager（6 套模板共用） */
.zlp-l1{height:32px;padding:0 14px;border:1px solid #0f766e;border-radius:6px; background:#0f766e;color:#fff;font-size:13px;cursor:pointer}
.zlp-l2{width:62px;height:32px;padding:0 8px;border:1px solid #e3ebe8;border-radius:6px; font-size:13px;text-align:center;background:#fff}
.zlp-l3{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px;font-size:12.5px;color:#8ea3a0}
.zlp-l4{margin-left:12px;font-size:12.5px;color:#8ea3a0}
.zlp-l9{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;margin:26px 0 8px}

/* rec-read-marquee 推荐阅读单行 + 跑马灯 */
.rec-read{display:flex;flex-wrap:nowrap;align-items:center;overflow:hidden}
.rec-read-track{display:flex;flex-wrap:nowrap;align-items:center;white-space:nowrap;
  min-width:0;animation:zl-marquee 46s linear infinite;will-change:transform}
.rec-read:hover .rec-read-track{animation-play-state:paused}
.rec-read-track a{white-space:nowrap;flex-shrink:0}
@keyframes zl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rec-read-track{animation:none}}
.cov{display:block}

/* ===== cate-cover-fix 频道精选封面固定尺寸 =====
   .c-feat-cov 没有宽度、.bkc 被 .bkc{width:64px} 和内联样式互相覆盖，
   结果封面按图片原始比例撑开，大小不一。这里统一锁成 3:4。 */
.cate-books .c-feat-cov{flex:0 0 auto;width:112px;height:149px;display:block;
  overflow:hidden;border-radius:8px;aspect-ratio:3/4;position:relative}
.cate-books .c-feat .bkc{
  display:block;width:112px;height:149px;min-width:112px;
  aspect-ratio:3/4;flex:none;position:relative;overflow:hidden;border-radius:8px}
.cate-books .c-feat .bkc>img.bkc-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;z-index:3}
.cate-books .c-feat .bkc .bkc-t{
  position:absolute;left:0;right:0;top:26%;padding:0 5px;
  font-size:10px;line-height:1.25;text-align:center;-webkit-line-clamp:3}

/* 小卡片（03-06 行）保持一致，不需要封面 */
.cate-books li.c-t{min-height:32px}

@media(max-width:560px){
  .cate-books .c-feat-cov,.cate-books .c-feat .bkc{width:88px;height:117px;min-width:88px}
}


/* rec-read-marquee-v2 跑马灯：固定视口 + 内部移动层
   原来 track 自己带 overflow:hidden 且直接 translateX(-50%)，
   移动到左侧时会压住「推荐阅读：」标签。现在套一层 .rec-read-view 做裁剪，
   track 只在自己的框里移动，文字从右侧循环进入。 */
.rec-read{gap:0}
.rec-read-label{position:relative;z-index:2;background:var(--card,#fff);padding-right:4px}
.rec-read-view{flex:1 1 auto;min-width:0;overflow:hidden;position:relative}
.rec-read-track{display:flex;flex-wrap:nowrap;align-items:center;white-space:nowrap;
  width:max-content;animation:zl-marquee 46s linear infinite;will-change:transform}
.rec-read:hover .rec-read-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rec-read-track{animation:none}}

/* upd-cat 最近更新里的分类徽标 */
.upd-cat{display:inline-block;flex:0 0 auto;margin-right:6px;padding:1px 6px;text-decoration:none;
  border-radius:4px;font-size:11px;font-weight:600;line-height:1.6;
  color:var(--pri,#2563eb);background:rgba(37,99,235,.09);
  vertical-align:middle;white-space:nowrap}
a:hover .upd-cat{background:rgba(37,99,235,.16)}
@media(max-width:560px){.upd-cat{font-size:10px;padding:0 5px}}

/* shelf-btn-contrast 加入书架按钮：不依赖 --ink 变量，保证可读 */
.d-actions .btn-ghost,
.actions .btn-ghost,
.btn.ghost,
.btn-shelf{
  background:#ffffff !important;
  color:#0f766e !important;
  border:1px solid #0f766e !important;
  font-weight:700;
  text-decoration:none;
}
.d-actions .btn-ghost:hover,
.actions .btn-ghost:hover,
.btn.ghost:hover,
.btn-shelf:hover{
  background:#0f766e !important;
  color:#ffffff !important;
}
/* dingdian 的纯文字链接式加入书架 */
.binfo-red{
  background:#c0392b !important;
  color:#ffffff !important;
  padding:5px 14px;border-radius:6px;
}
.binfo-red:hover{background:#e74c3c !important;color:#fff !important}

/* fin-text-ellipsis 完本排行：书名和章节名超长时省略，不撑破卡片 */
.fin-card{min-width:0;max-width:100%;overflow:hidden}
.fin-card .fin-i{min-width:0;overflow:hidden}
.fin-card .fin-i h3{
  display:block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fin-card .fin-ch{
  display:block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* zl-latest-gap 最新章节块与上方按钮的间距 */
.zl-latest{margin-top:30px}
@media(max-width:560px){.zl-latest{margin-top:22px}}

/* chap-head-nowrap 目录标题不换行 + 排序控件靠右 */
.chap-head{flex-wrap:nowrap;gap:14px}
.chap-head h2{white-space:nowrap;flex:none}
.chap-head .chap-sort{margin-left:auto;flex:none;display:flex;gap:6px}
.zl-latest + .moge-s12, .zl-latest + section{margin-top:26px}
@media(max-width:640px){.chap-head{flex-wrap:wrap}.chap-head .chap-sort{margin-left:0}}

/* ==== tpl-palette 8 色静态调色板（替代无法编译的 Blade 变量） ==== */
.tpl-p0{--cbg:#3a4a5c;--cink:#efe7d2;--abg:#3a4a5c;--c1:#6E5BFF;--c2:#10152A;--h1:#3a4a5c;--h2:#10152A;--cg:#3a4a5c;--p1a:#3a4a5c;--p1b:#232c38}
.tpl-p1{--cbg:#4a3a2f;--cink:#eee2c8;--abg:#4a3a2f;--c1:#33E0C4;--c2:#10152A;--h1:#4a3a2f;--h2:#10152A;--cg:#4a3a2f;--p1a:#4a3a2f;--p1b:#2a1f18}
.tpl-p2{--cbg:#3a2f4a;--cink:#e6ddf0;--abg:#3a2f4a;--c1:#FF7090;--c2:#10152A;--h1:#3a2f4a;--h2:#10152A;--cg:#3a2f4a;--p1a:#3a2f4a;--p1b:#221a2e}
.tpl-p3{--cbg:#31424e;--cink:#e3ecf0;--abg:#31424e;--c1:#FFC44D;--c2:#10152A;--h1:#31424e;--h2:#10152A;--cg:#31424e;--p1a:#31424e;--p1b:#1c2830}
.tpl-p4{--cbg:#5c2e35;--cink:#f2e2d8;--abg:#5c2e35;--c1:#E8A878;--c2:#10152A;--h1:#5c2e35;--h2:#10152A;--cg:#5c2e35;--p1a:#5c2e35;--p1b:#3a1b20}
.tpl-p5{--cbg:#57624f;--cink:#f0ead6;--abg:#57624f;--c1:#8FD9A8;--c2:#10152A;--h1:#57624f;--h2:#10152A;--cg:#57624f;--p1a:#57624f;--p1b:#333b2d}
.tpl-p6{--cbg:#443650;--cink:#e8dff0;--abg:#443650;--c1:#B07CFF;--c2:#10152A;--h1:#443650;--h2:#10152A;--cg:#443650;--p1a:#443650;--p1b:#2a2033}
.tpl-p7{--cbg:#2f3a4a;--cink:#efe7d2;--abg:#2f3a4a;--c1:#5BA8FF;--c2:#10152A;--h1:#2f3a4a;--h2:#10152A;--cg:#2f3a4a;--p1a:#2f3a4a;--p1b:#1b232e}
/* upd-oneline 最近更新统一单行：分类 书名·章节 摘要 作者 时间 */
.upd-sec li{display:flex !important;align-items:center !important;gap:10px !important;
  padding:10px 16px !important;border-bottom:1px solid var(--line) !important;min-width:0 !important}
.upd-sec li:last-child{border-bottom:0 !important}
.upd-sec li:hover{background:rgba(31,111,224,.03) !important}
.upd-sec li .upd-cat{flex:0 0 auto !important;display:inline-block !important;padding:1px 7px !important;
  border-radius:5px !important;font-size:11px !important;line-height:1.6 !important;
  color:#2563eb !important;background:rgba(37,99,235,.12) !important;white-space:nowrap !important;
  max-width:76px !important;overflow:hidden !important;text-overflow:ellipsis !important}

.upd-sec li{display:flex !important;align-items:center !important;gap:10px !important}
.upd-sec li .upd-mid{display:flex !important;flex:1 1 auto !important;align-items:center !important;gap:10px !important;min-width:0 !important}
.upd-sec li .upd-t{display:flex !important;align-items:center !important;gap:10px !important;margin:0 !important;min-width:0 !important;flex:0 1 auto !important}
.upd-sec li .bk-name{font-family:var(--serif) !important;font-weight:700 !important;font-size:14px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:190px !important}
.upd-sec li .upd-ch{font-size:13px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:210px !important}
.upd-sec li .upd-ch::before{content:"·";margin-right:6px;color:#9aa}
.upd-sec li .upd-d{flex:1 1 auto !important;min-width:0 !important;display:block !important;margin:0 !important;font-size:12px !important;color:#9aa !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.upd-sec li .upd-d a{color:inherit !important}
.upd-sec li .upd-side{flex:0 0 auto !important;display:flex !important;flex-direction:row !important;align-items:center !important;gap:8px !important;margin:0 !important}