/* ============================================================
   页面级样式：外壳、说明条、筛选条、书架、详情页、政策页
   与 base.css 配套使用
   ============================================================ */

.bs-wrap{max-width:1180px; margin:0 auto; padding:22px 20px 0;}
.bs-wrap.narrow{max-width:920px;}

/* ============================================================
   书城：顶部说明条
   ============================================================ */
.bs-hero{
  background:var(--bs-card); border:1px solid var(--bs-line);
  border-radius:16px; box-shadow:var(--bs-sd);
  padding:22px 24px; margin-bottom:16px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.bs-hero .txt{flex:1; min-width:260px;}
.bs-hero h2{margin:0 0 5px; font-size:18px; font-weight:700; letter-spacing:-.01em;}
.bs-hero p{margin:0; font-size:13px; color:var(--bs-muted); line-height:1.7;}
.bs-hero p b{color:var(--bs-ink); font-weight:600;}
.bs-hero .figs{display:flex; gap:26px;}
.bs-hero .fig b{display:block; font-size:22px; font-weight:700; line-height:1.25;}
.bs-hero .fig small{font-size:11.5px; color:var(--bs-muted);}
.bs-hero .fig.b b{color:var(--bs-blue);}
.bs-hero .fig.p b{color:var(--bs-purple);}
.bs-hero .fig.g b{color:var(--bs-amber);}

/* ============================================================
   书城：筛选条
   ============================================================ */
.bs-shelfbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:16px;
}
.bs-shelfbar .grp{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.bs-shelfbar .grp.cats{padding-left:8px; border-left:1px solid var(--bs-line);}
.bs-shelfbar .grp.sorts{margin-left:auto;}
.bs-shelfbar .grp.sorts label{font-size:12.5px; color:var(--bs-faint);}
.bs-shelfbar select{
  border:1px solid var(--bs-line); background:var(--bs-card);
  border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600;
  font-family:inherit; color:var(--bs-muted); cursor:pointer; outline:none;
}
.bs-shelfbar select:focus{border-color:var(--bs-teal); color:var(--bs-ink);}

/* ============================================================
   我的书架：页头
   ============================================================ */
.bs-shelfhd{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:4px;
}
.bs-shelfhd h1{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em;}
.bs-shelfhd .sub{font-size:13px; color:var(--bs-muted);}
.bs-shelfhd .acts{margin-left:auto; display:flex; gap:7px;}

.bs-note{
  font-size:12.5px; color:var(--bs-muted); line-height:1.75;
  background:#faf9f6; border:1px solid var(--bs-line);
  border-radius:12px; padding:11px 15px; margin:14px 0 4px;
}
.bs-note b{color:var(--bs-ink); font-weight:600;}

/* 书架专用卡片：加高一点，容纳进度与按钮 */
.bs-bk.shelf .bs-cv{aspect-ratio:3/3.2;}
.bs-bk.shelf .bar2{margin-top:10px;}
.bs-bk.shelf .bar2 .r{
  display:flex; align-items:baseline; gap:6px;
  font-size:11.5px; color:var(--bs-muted); margin-bottom:5px;
}
.bs-bk.shelf .bar2 .r b{margin-left:auto; color:var(--bs-teal); font-weight:600;}
.bs-bk.shelf.wait .bar2 .r b{color:var(--bs-amber);}
.bs-bk.shelf .bar2 .bs-btn{width:100%; margin-top:11px;}

/* ============================================================
   书籍详情页
   ============================================================ */
.bs-detail{
  display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap;
  background:var(--bs-card); border:1px solid var(--bs-line);
  border-radius:16px; box-shadow:var(--bs-sd); padding:26px 28px;
}
.bs-detail .cover{width:180px; flex:none;}
.bs-detail .info{flex:1; min-width:280px;}
.bs-detail .info h1{margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.35;}
.bs-detail .info .sub{font-size:13.5px; color:var(--bs-muted); margin-bottom:12px;}
.bs-detail .info .desc{font-size:13.5px; color:var(--bs-ink2); line-height:1.8; margin:12px 0;}
.bs-detail .tags{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0;}
.bs-detail .facts{
  display:flex; gap:22px; flex-wrap:wrap;
  margin:14px 0; padding:14px 0; border-top:1px solid var(--bs-line2); border-bottom:1px solid var(--bs-line2);
}
.bs-detail .facts .f b{display:block; font-size:17px; font-weight:700;}
.bs-detail .facts .f small{font-size:11.5px; color:var(--bs-muted);}
.bs-detail .cta{display:flex; gap:9px; flex-wrap:wrap; margin-top:6px;}

/* 许愿进度块 */
.bs-votebox{
  background:#fdfaf3; border:1px solid #efdcb8;
  border-radius:14px; padding:16px 18px; margin:14px 0;
}
.bs-votebox .r{display:flex; align-items:baseline; gap:8px; font-size:12.5px; color:var(--bs-amber); margin-bottom:8px;}
.bs-votebox .r b{margin-left:auto; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;}
.bs-votebox .bs-track{height:8px; background:#f3e9d5;}
.bs-votebox .bs-track > i.fill{background:linear-gradient(90deg,#d2a63a,#8a5a08);}
.bs-votebox .left{font-size:12px; color:#a98342; margin-top:8px;}

/* 许愿者名单 */
.bs-wishers{
  background:var(--bs-card); border:1px solid var(--bs-line);
  border-radius:16px; box-shadow:var(--bs-sd);
  padding:20px 24px; margin-top:16px;
}
.bs-wishers h3{margin:0 0 14px; font-size:15px; font-weight:600;}
.bs-wisher-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.bs-wisher{
  display:flex; align-items:center; gap:9px;
  background:#faf9f6; border:1px solid var(--bs-line);
  border-radius:11px; padding:8px 12px;
}
.bs-wisher .av{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--bs-teal); color:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
}
.bs-wisher .av img{width:100%; height:100%; object-fit:cover;}
.bs-wisher .n{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bs-wisher .c{font-size:11px; color:var(--bs-amber); margin-left:auto; flex:none;}

/* ============================================================
   政策 / 说明页
   ============================================================ */
.bs-doc{
  background:var(--bs-card); border:1px solid var(--bs-line);
  border-radius:16px; box-shadow:var(--bs-sd);
  padding:32px 38px; font-size:14px; line-height:1.95; color:var(--bs-ink2);
}
.bs-doc h1{margin:0 0 6px; font-size:23px; font-weight:700; color:var(--bs-ink); letter-spacing:-.01em;}
.bs-doc .meta{font-size:12.5px; color:var(--bs-faint); margin-bottom:22px;}
.bs-doc h2{margin:28px 0 8px; font-size:16px; font-weight:600; color:var(--bs-ink);}
.bs-doc h3{margin:20px 0 6px; font-size:14.5px; font-weight:600; color:var(--bs-ink);}
.bs-doc p{margin:9px 0;}
.bs-doc ul,.bs-doc ol{margin:9px 0; padding-left:23px;}
.bs-doc li{margin:5px 0;}
.bs-doc strong{color:var(--bs-ink); font-weight:600;}
.bs-doc code{
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px;
  background:#f3f2ee; border:1px solid var(--bs-line); border-radius:5px;
  padding:1px 6px; color:#8a3a08; overflow-wrap:break-word;
}
.bs-doc .hl{
  background:#fbf3e2; border:1px solid #efdcb8; border-radius:12px;
  padding:14px 18px; margin:16px 0; color:#6d4706; font-size:13.5px;
}
.bs-doc .back{margin-top:30px; padding-top:20px; border-top:1px solid var(--bs-line);}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:860px){
  .bs-wrap{padding:16px 14px 0;}
  .bs-hero{padding:18px; gap:18px;}
  .bs-hero .figs{gap:20px;}
  .bs-shelfbar .grp.cats{border-left:none; padding-left:0; width:100%;}
  .bs-shelfbar .grp.sorts{margin-left:0; width:100%;}
  .bs-detail{padding:18px; gap:18px;}
  .bs-detail .cover{width:132px;}
  .bs-doc{padding:22px 20px;}
}