/* ==========================================================================
   新知选书平台 · 视觉改版皮肤 v3   2026-10-13
   --------------------------------------------------------------
   独立覆盖层，加载在 styles.css 之后；不改原文件，随时可回退（删掉 index.html 里
   那一行 <link rel="stylesheet" href="theme.css"> 即可）。

   v3 相对 v2 的变化（针对「字体发虚 / 分辨率不高」）：
   A) font-synthesis:none —— 干掉"合成粗体"。Windows 的微软雅黑只有 400/700
      两档，站点里 47 处 font-weight:800/900 以前是浏览器描出来的假粗体，边缘糊；
      关掉后浏览器直接取真·Bold 字形，笔画立刻干净。
   B) 全站字号取整 —— 原 14.5 / 13.5 / 12.5 / 16.5 / 15.5px 在 Windows 下会落到
      亚像素位置，中文笔画糊；统一改为整数 px。
   C) 字体栈重排 —— Latin/数字走 Segoe UI（Windows 自带、字口锐），中文回落到
      微软雅黑 UI，Mac 上走 SF / 苹方。
   D) text-rendering:optimizeLegibility + 字形平滑，进一步锐化。
   ========================================================================== */

:root{
  --bg:#F2F5F8;
  --card:#FFFFFF;
  --ink:#1B2632;
  --ink-2:#465565;
  --muted:#7E8C9B;
  --line:#E4EAF0;
  --line-2:#EEF2F6;
  --brand:#C0392B;
  --brand-dark:#A62C20;
  --brand-tint:#FCF1EF;
  --radius:16px;
  --shadow-s:0 1px 2px rgba(16,24,40,.05);
  --shadow-m:0 8px 24px rgba(16,24,40,.09);
  --shadow-l:0 18px 44px rgba(16,24,40,.16);
}

/* ---------- 基础：字体渲染锐化 ---------- */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",Roboto,Arial,sans-serif;
  font-size:15px;                 /* 整数 */
  line-height:1.6;
  font-synthesis:none;            /* 关键：禁合成粗体，800/900 回落到真 Bold */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* 保险：即便浏览器不支持 font-synthesis，也把超高字重压回 700 */
body b,body strong,body h1,body h2,body h3,body h4{font-weight:700}

/* ---------- 顶栏 ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(16,24,40,.06);
  padding:10px 22px;
  gap:16px;
}
.brand-text h1{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.brand-text p{font-size:11px;color:var(--muted)}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#D24A38,#A62C20);box-shadow:0 4px 12px rgba(192,57,43,.3)}

.search-box input{
  border:1px solid var(--line);
  background:#F4F7FA;
  border-radius:12px;
  padding:10px 16px;
  font-size:14px;
  color:var(--ink);
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.search-box input::placeholder{color:#9AA7B4}
.search-box input:hover{background:#EFF3F7}
.search-box input:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(192,57,43,.12)}

.tb-count{font-size:13px;font-weight:700;color:var(--muted);background:#F4F7FA;border-radius:999px;padding:5px 12px}
.tb-count b{color:var(--ink);font-weight:700}
.tb-sel{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);font-weight:700;font-size:13px;padding:8px 10px}
.tb-sel:hover{border-color:#CBD6E0}

.cart-btn{
  border-radius:14px;
  background:linear-gradient(135deg,#D24A38,#A62C20);
  box-shadow:0 6px 16px rgba(192,57,43,.28);
  padding:9px 14px 9px 18px;
}
.cart-btn:hover{box-shadow:0 10px 22px rgba(192,57,43,.36);transform:translateY(-1px)}
.cb-view{border-radius:11px}

/* ---------- 布局 ---------- */
.layout{padding:22px 24px;gap:22px;max-width:1520px}

/* ---------- 侧栏 ---------- */
.sidebar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);padding:12px 0 16px;
}
.facet h3{font-size:13px;letter-spacing:1.2px;color:var(--muted);font-weight:700;padding-left:16px}

/* 馆别项：图标嵌浅色块 + 名称 + 浅灰数字，整体更干净 */
.cat-tree{padding:0 8px;gap:3px}
.cat-hall{
  border:none;border-left:none;background:transparent;border-radius:12px;
  padding:10px 12px;margin:0;gap:11px;font-size:16px;font-weight:700;
  transition:background .15s,color .15s;
}
.cat-hall .ic{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;font-size:17px;
  background:color-mix(in srgb,var(--hc) 14%,#fff);
  transition:background .15s;
}
.cat-hall .t{font-size:16px;font-weight:700}
.cat-hall .cnt{
  background:transparent;color:var(--muted);border-radius:0;font-size:13px;
  font-weight:700;padding:0;margin-right:20px;min-width:0;
}
.cat-hall::after{right:14px;font-size:12px;color:#C2CCD6}
.cat-hall:hover{background:color-mix(in srgb,var(--hc) 8%,#fff);border:none}
.cat-hall:hover .ic{background:color-mix(in srgb,var(--hc) 22%,#fff)}
.cat-hall.active{background:color-mix(in srgb,var(--hc) 13%,#fff);color:var(--hc);border:none}
.cat-hall.active .ic{background:var(--hc);color:#fff}
.cat-hall.active .cnt{color:var(--hc);background:transparent}
.cat-hall.active::after{color:var(--hc)}
.cat-building{font-size:12px;color:var(--muted);padding:4px 16px 10px}

/* 二级 / 三级：去掉彩色竖条，改用更柔的底 */
.cat-major{border-left:none;padding-left:34px;border-radius:10px;font-weight:700;color:var(--ink-2)}
.cat-major:hover{background:color-mix(in srgb,var(--c) 9%,#fff)}
.cat-major.active{background:var(--c);color:#fff}
.cat-major.open{padding-left:34px}
.cat-major.open::before{left:14px}
.cat-subs{margin-left:16px;padding-left:10px;border-left:2px solid var(--line-2)}
.cat-sub{border-radius:9px;font-weight:700;font-size:15px;color:var(--ink-2)}
.cat-thirds{margin-left:18px;padding-left:10px;border-left:2px dashed var(--line)}
.cat-third{border-radius:9px;font-weight:700;font-size:14px;color:var(--ink-2)}
.cat-major .cnt,.cat-sub .cnt,.cat-third .cnt{background:var(--line-2);color:var(--ink-2);border-radius:999px;font-size:12px}
.cat-major.active .cnt,.cat-sub.active .cnt,.cat-third.active .cnt{background:rgba(255,255,255,.25);color:#fff}

/* 悬浮面板 */
.cat-flyout{border-radius:16px;border:1px solid var(--line);border-left:5px solid var(--c,#C0392B);box-shadow:var(--shadow-l)}
.cat-flyout .ff-head{border-radius:12px}

/* ---------- 筛选条 ---------- */
.result-bar{margin-bottom:12px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;box-shadow:var(--shadow-s)}
.filter-bar{border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-s);margin-bottom:12px}

/* ---------- 书单 ---------- */
.book-list{gap:14px}

/* 宽屏双列：把横向空间用起来 */
@media (min-width:1280px){
  .book-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book-list.topic-index{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}
@media (min-width:1720px){
  .book-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.book-row{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--c,#C0392B);
  border-radius:var(--radius);
  padding:16px;
  gap:16px;
  box-shadow:var(--shadow-s);
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.book-row:hover{
  box-shadow:0 14px 32px rgba(16,24,40,.13);
  border-color:#D5DEE7;
  border-left-color:var(--c,#C0392B);
  transform:translateY(-2px);
}

/* 封面：主角 */
.br-cover{
  width:142px;flex:0 0 auto;align-self:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  overflow:hidden;box-shadow:0 3px 12px rgba(16,24,40,.10);
}
.br-cover img.br-img{width:100%;height:auto;display:block;transition:transform .3s}
.book-row:hover .br-cover img.br-img{transform:scale(1.04)}
.br-cover div.br-img{
  width:100%;aspect-ratio:3/4;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;line-height:1.35;text-align:center;padding:10px;
}

.br-tags{gap:6px;margin-top:1px}
.br-title{font-size:17px;font-weight:700;color:var(--ink);line-height:1.4;letter-spacing:.1px}
.br-fields{gap:3px 18px;font-size:13px;color:var(--ink-2)}
.bf{color:var(--ink-2)}
.bf i{color:var(--muted);font-weight:500;margin-right:5px}
.br-intro{font-size:13px;color:#6B7A89;line-height:1.7}
.br-buy{padding-top:8px}
.br-buy .price{font-size:20px;font-weight:700;color:var(--brand);letter-spacing:.2px}

/* 标签 / 徽章 */
.tag{border-radius:8px;font-weight:700;padding:3px 9px;font-size:12px}
.tag.cat{background:var(--brand-tint);color:var(--brand)}
.tag.sub{background:#EEF4FA;color:#3A6EA5}
.tag.third{background:color-mix(in srgb,var(--c,#C0392B) 12%,#fff);color:var(--c,#C0392B);border:1px solid color-mix(in srgb,var(--c,#C0392B) 26%,#fff)}
.badge{border-radius:8px;padding:3px 9px;font-size:12px}
.b-theme{background:#F2F5F8;border-color:#E1E8EF;color:var(--bc,#C0392B)}

/* 按钮 */
.add-btn{border-radius:11px;padding:10px 18px;font-size:14px;font-weight:700;box-shadow:0 3px 10px rgba(192,57,43,.22)}
.load-more{border-radius:999px;border-color:#D9E1E8;color:var(--ink-2);background:#fff;font-size:14px}
.load-more:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- 购物车抽屉 ---------- */
.cart{box-shadow:-10px 0 40px rgba(16,24,40,.18)}
.cart-head{border-bottom:1px solid var(--line);padding:18px 20px}
.cart-head h2{font-size:17px;font-weight:700}
.cart-item{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-s)}
.cart-foot{border-top:1px solid var(--line)}
.cs-item{border-radius:12px}
.primary{border-radius:10px;font-weight:700}
.ghost{border-radius:10px}

/* ---------- 页脚 / 回顶 ---------- */
.site-foot{background:#fff;border-top:1px solid var(--line)}
#back-top{border-radius:999px;box-shadow:var(--shadow-m)}

/* ==========================================================================
   移动端
   ========================================================================== */
@media (max-width:900px){
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:10px}
  .brand{flex:1 1 auto;min-width:0;order:1}
  .brand-text h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cart-area{order:2;flex:0 0 auto}
  .search-box{order:3;flex:1 1 100%;max-width:none}
  .search-box input{font-size:16px}           /* 防 iOS 聚焦放大 */
  .cart-btn{padding:9px 12px 9px 14px;gap:8px;border-radius:12px}
  .tb-tools{order:4;width:100%;justify-content:flex-start;overflow-x:auto}

  .layout{padding:12px 12px 22px;gap:12px}
  .facet h3{padding-left:12px}
  .cat-tree{padding:0 6px}
  .book-row{padding:12px;gap:12px;border-radius:14px}
  .br-cover{width:106px;border-radius:10px}
  .br-title{font-size:16px}
  .br-intro{font-size:12px;-webkit-line-clamp:2}
  .br-buy .price{font-size:18px}
  .add-btn{padding:9px 14px;font-size:13px}
}
@media (max-width:430px){
  .br-cover{width:94px}
  .br-fields{font-size:12px;gap:2px 12px}
  .br-title{font-size:15px}
}