:root{
  --bg:#f3f4f6; --card:#ffffff; --line:#edeef0; --line2:#f4f5f6;
  --t1:#1c1f23; --t2:#4a4f57; --t3:#9298a1; --accent:#c8102e; --accent2:#e23;
  --link:#2563a8; --radius:12px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 2px 8px rgba(20,23,28,.05);
  --shadow-hover:0 4px 16px rgba(20,23,28,.1);
}
body{background:var(--bg)!important;color:var(--t1);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:0 14px}

/* 卡片 */
.bcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.bcard + .bcard{margin-top:12px}
.bhead{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 11px}
.bhead h2{font-size:17px;font-weight:700;color:var(--t1);position:relative;padding-left:11px;letter-spacing:.3px}
.bhead h2::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3.5px;border-radius:2px;background:var(--accent)}
.bmore{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:2px}
.bmore:hover{color:var(--accent)}

/* 封面组件：固定 3:4，圆角，object-cover 杜绝露红；占位柔和 */
.cv{position:relative;aspect-ratio:3/4;border-radius:7px;overflow:hidden;background:#e8eaed;background-image:linear-gradient(100deg,#e8eaed 25%,#eef0f3 50%,#e8eaed 75%);background-size:200% 100%;animation:cvsh 1.5s ease-in-out infinite;box-shadow:0 1px 4px rgba(20,23,28,.12);flex-shrink:0}
@keyframes cvsh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cv-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 11px 21px 15px;font-family:"Noto Serif SC","Songti SC",STSong,STZhongsong,serif;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:1px;color:rgba(255,255,255,.96);background:#3f5168;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden}
.cv-ph>span{position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.3)}
/* 书脊 */
.cv-ph::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.04) 55%,rgba(255,255,255,.10));z-index:2}
/* 底部品牌水印 */
.cv-ph::after{content:"51書庫";position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:8.5px;letter-spacing:2.5px;font-weight:400;color:rgba(255,255,255,.52);text-indent:2.5px;z-index:2}
.cv-ph.p0{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#46596f,#283648)}
.cv-ph.p1{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#3b5c50,#1f3a31)}
.cv-ph.p2{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#544466,#322642)}
.cv-ph.p3{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#75513c,#4a3122)}
.cv-ph.p4{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#345b63,#1d3940)}
.cv-ph.p5{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#74404c,#48232b)}
.cv-ph.p6{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#595b36,#383a1f)}
.cv-ph.p7{background:radial-gradient(120% 60% at 50% -12%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#4c505a,#2d3037)}

/* 网格(精品) */
.grid-cv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:4px 16px 16px}
@media(min-width:480px){.grid-cv{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){.grid-cv{grid-template-columns:repeat(6,minmax(0,1fr))}}
.gi-title{margin-top:7px;font-size:13px;color:var(--t2);text-align:center;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gitem:active .gi-title{color:var(--accent)}

/* 列表行(最新/分类/搜索) */
.brow{display:flex;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line2)}
.brow:last-child{border-bottom:0}
.brow:active{background:#fafbfc}
.brow .cv{width:62px}
.brow-bd{min-width:0;flex:1;display:flex;flex-direction:column}
.brow-t{font-size:15.5px;font-weight:600;color:var(--t1);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow-meta{margin-top:4px;font-size:12px;color:var(--t3)}
.brow-meta .cat{color:var(--accent);opacity:.9}
.brow-intro{margin-top:6px;font-size:12.5px;color:var(--t2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.brow-last{margin-top:auto;padding-top:6px;font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 排行(数字) */
.rk{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line2)}
.rk:last-child{border-bottom:0}
.rk:active{background:#fafbfc}
.rk-no{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:12.5px;font-weight:700;font-style:italic;background:#eef0f2;color:#a8adb5}
.rk-no.top{background:linear-gradient(135deg,var(--accent),#e8324a);color:#fff;box-shadow:0 2px 6px rgba(200,16,46,.35)}
.rk-t{flex:1;min-width:0;font-size:14.5px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-hot{flex-shrink:0;font-size:12px;color:var(--accent);font-weight:600}

/* 分类快捷胶囊 */
.cats{display:flex;flex-wrap:wrap;gap:9px;padding:2px}
.cat-chip{padding:7px 16px;border-radius:20px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--t2);box-shadow:var(--shadow);transition:.15s}
.cat-chip:active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:9px;font-size:14.5px;font-weight:600;border:none;cursor:pointer;transition:.15s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(200,16,46,.3)}
.btn-primary:active{transform:scale(.97)}
.btn-line{background:var(--card);color:var(--t2);border:1.5px solid var(--line)}
.btn-line:active{border-color:var(--accent);color:var(--accent)}

/* 顶部导航精修 v606p */
.tnav-row{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;padding:1px 7px 3px}
.tnav-i{display:inline-flex;align-items:center;padding:8px 13px;font-size:13.5px;line-height:1;color:rgba(255,255,255,.82);border-radius:6px;transition:color .15s,background .15s;white-space:nowrap;letter-spacing:.3px}
.tnav-i:hover{color:#fff;background:rgba(0,0,0,.25)}
.tnav-home{color:#fff;font-weight:600}

/* 空态 v606q */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:46px 24px;text-align:center}
.empty-ic{width:54px;height:54px;color:#d2d6dd;margin-bottom:13px}
.empty-tt{font-size:14px;color:var(--t2);font-weight:500}
.empty-sub{margin-top:5px;font-size:12.5px;color:var(--t3)}
.empty-act{margin-top:17px;display:inline-flex;align-items:center;height:36px;padding:0 20px;border-radius:18px;background:var(--accent);color:#fff;font-size:13px;font-weight:500;box-shadow:0 2px 8px rgba(200,16,46,.25);transition:transform .15s}
.empty-act:active{transform:scale(.97)}

/* 详情页章节折叠 v606r */
.chap-list:not(.chap-all)>li:nth-child(n+21){display:none}
.chap-expand{display:block;width:calc(100% - 12px);margin:4px 6px 12px;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--t2);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s}
.chap-expand:active{border-color:var(--accent);color:var(--accent)}

/* 列表细节 + 交互态 v606s */
.last-tag{display:inline-block;padding:0 6px;margin-right:6px;border-radius:4px;background:#eef0f2;color:#969ba3;font-size:11px;font-weight:500;line-height:17px;vertical-align:1px}
@media(min-width:1000px){
  .brow{transition:background .15s}
  .brow:hover{background:#fafbfc}
  .rk:hover{background:#fafbfc}
  .gitem:hover .gi-title{color:var(--accent)}
  .gitem .cv{transition:transform .2s,box-shadow .2s}
  .gitem:hover .cv{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,23,28,.16)}
  .cat-chip:hover{border-color:var(--accent);color:var(--accent)}
}