:root{
  --pink:#FB7299; --pink-d:#e85f89; --purple:#7B61FF; --ink:#2b2b3a;
  --bg:#f5f6fa; --card:#ffffff; --line:#ececf3; --txt:#4a4a5a; --sub:#9a9ab0;--ink:#684962;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width: 100%;}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}

/* ===== 顶部 ===== */
.topbar{background:linear-gradient(120deg, #453f60 0%, #2d2140 55%, #3b1f3d 100%);color:#b8b8c8;font-size:12px}
.topbar .wrap{display:flex;justify-content:space-between;height:32px;align-items:center}
.topbar a:hover{color:var(--pink)}
header{position:sticky;top:0;padding-bottom: 10px;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.18);
  background: linear-gradient(120deg,#2b2140,#4a2b52 55%,#6b3157);
  background: linear-gradient(120deg,#1c1c28 0%,#2d2140 55%,#3b1f3d 100%);
  background: linear-gradient(120deg, #93246b, #1b2c6a 58%, #6b0749);
}
.hd{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-size:22px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.logo .badge{background:linear-gradient(135deg, var(--pink), #b22d61);border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 14px rgba(251,114,153,.5)}
.logo em{font-style:normal;background:linear-gradient(90deg,#ff9eb8,#c3aaff);-webkit-background-clip:text;background-clip:text;color:transparent}
.slogan{color:#8f8fa5;font-size:12px;display:none}
.search{flex:1;max-width:420px;position:relative; margin-left: auto;}
.search input{width:100%;height:38px;border:none;outline:none;border-radius:19px;padding:0 90px 0 18px;font-size:13px;background:rgba(255,255,255,.12);color:#fff}
.search input::placeholder{color:#9c9cb4}
.search button{position:absolute;right:4px;top:4px;height:30px;border:none;border-radius:15px;padding:0 18px;
  background:linear-gradient(90deg, var(--pink), #dc5a80);
  background: linear-gradient(90deg, rgb(201 99 121), rgba(192, 128, 146, 0.85));
  color:#fff;font-size:13px;cursor:pointer;font-weight:600}
.search button:hover { background: linear-gradient(90deg, #ff5c8a, var(--pink)); box-shadow: 0 4px 12px rgba(255, 100, 150, 0.4);}
.search button:active { box-shadow: 0 1px 3px rgba(255, 100, 150, 0.3); filter: brightness(0.95); }
.hd-link{color:#c9c9dd;font-size:16px;white-space:nowrap;display:flex;gap:16px;margin-left:auto;}
.hd-link a:hover{color:var(--pink)}

/* ===== 导航 ===== */
nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:99}
.nav-in{display:flex;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav-in a{padding:13px 20px;font-size:15px;font-weight:600;color:var(--txt);
color:#475569;color: #52677e;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
.nav-in a.on,.nav-in a:hover{color:var(--pink);border-bottom-color:var(--pink)}

/* ===== Hero ===== */
.hero{margin:14px auto 5px;height:293px}
.hero-grid{display:grid;grid-template-columns:250px 1fr 250px;gap:10px;align-items:stretch}

.hero-card{background:var(--card);border-radius:14px;box-shadow:0 2px 10px rgba(30,30,60,.05);padding:12px;display:flex;flex-direction:column}
.hero-card h3{font-size: 15px; margin-bottom: 5px; padding: 6px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); border-bottom: 2px solid #f1f2f4;}
.hero-notice h3{position:relative;z-index:2}
.hero-card h3::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--pink),var(--purple))}

/* 第一列：周点击前3本 */
.hero-week-top{justify-content:flex-start;background: url(/css/img/4967ef6.png) no-repeat;background-size:cover;background-position:center;background-attachment:fixed;}
.week-top-list{display:flex;flex-direction:column;gap: 10px;}
.week-item{display:grid;grid-template-columns:27px 45px 1fr;align-items:flex-start;gap: 4px;padding:6px 10px 6px 0;border-radius:8px;transition:background .2s;border-bottom: 1px solid #f1f2f4;padding-left: 10px;}
.week-item:hover{background:#faf7fb}
.week-item .rank-no{width:27px;height:36px;background-image:url('/css/img/week_top.png');background-size:81px 36px;background-repeat:no-repeat}
.week-item .rank-no.rank-1{background-position:0 0}
.week-item .rank-no.rank-2{background-position:-27px 0}
.week-item .rank-no.rank-3{background-position:-54px 0}
/* 新增：week-item 中的 .no 样式 */
.week-item .no{flex:none;width:20px;height:20px;border-radius:6px;background:#eef0f6;color:#8a8aa0;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto}
.week-item:nth-child(1) .no,.week-item:nth-child(2) .no,.week-item:nth-child(3) .no{background:linear-gradient(135deg,#ff7ba2,#fb7299);color:#fff}
.week-item:nth-child(4) .no,.week-item:nth-child(5) .no,.week-item:nth-child(6) .no{background:#fde3ec;color:#e2567f}
.week-cover{width: 40px;height: 53px;border-radius:6px;overflow:hidden;background:#ececf4;box-shadow:0 2px 6px rgba(30,30,50,.1)}
.week-cover img{width:100%;height:100%;object-fit:cover}
.week-content{display:flex;flex-direction:column;gap:2px;min-width:0}
.week-title{display:block;font-size:13px;color:var(--txt);line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.week-title:hover{color:var(--pink)}
.week-meta{font-size:11px;color:var(--sub);margin-top:1px}
.week-visit{display:inline-block}
.week-tags{font-size:10px;line-height:16px}
.week-meta .week-tag{margin-right:6px}
.week-tag{display:inline-block;padding:0 6px;border-radius:4px;color:#b4b4c0;font-size:10px;line-height:16px;background:rgba(128,128,128,.12);vertical-align:middle}
.week-tag.blue{color:#6fb8e0;background:rgba(56,168,232,.12)}
.week-tag.green{color:#6cc4a8;background:rgba(47,191,154,.12)}
.week-tag.orange{color:#eca26a;background:rgba(255,138,60,.12)}
.week-tag.purple{color:#a893e0;background:rgba(124,92,204,.12)}
.week-tag.red{color:#e8849a;background:rgba(232,69,96,.12)}

/* 第二列：聚焦幻灯片 */
.hero-carousel{
  position: relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-radius:14px;
  padding:18px;
  box-shadow:0 2px 10px rgba(30,30,60,.05);
  width: 100%;
  background:var(--card);
  overflow: hidden;
}

/* 模糊背景层 */
.hero-carousel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 800px;
  background-image: var(--bg-image, linear-gradient(120deg, #fbf6ff, #fce7ed 55%, #fff6f9));
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(15vh) brightness(1.1) contrast(1.2) saturate(1.3);
  filter: blur(15vh) brightness(1.1) contrast(1.2) saturate(1.3);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* 底部渐变遮罩层 - 从透明到白色 */
.hero-carousel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 40%, #ffffff 100%);
  z-index: 0.5;
  pointer-events: none;
  border-radius: 0 0 14px 14px;
}

.carousel-wrapper { 
  position: relative; 
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 232px;            /* 刚好容纳放大后的封面+标题 */
  overflow: hidden;
  z-index: 2;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  --step: 143px;            /* 相邻两本的中心间距 */
  --scale: 1.3;             /* 中间那本的放大倍数 */
}

.carousel-item {
  --offset: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 102px;
  cursor: pointer;
  transform: translate(calc(-50% + var(--offset) * var(--step)), -50%) scale(1);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .6s ease;
  will-change: transform, opacity;
}
.carousel-item.is-center {
  transform: translate(-50%, -50%) scale(var(--scale));
  cursor: pointer;
}
.carousel-item.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.carousel-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.carousel-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.carousel-title {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #444;
  text-align: left;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  cursor: pointer;
}
.carousel-item.is-center .carousel-title {
  text-align: center;
  color: #222;
}

/* 左右按钮 */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
}
.carousel-wrapper:hover .carousel-btn { opacity: 1; }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

/* 圆点 */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding-bottom: 0;
  position: relative;
  z-index: 5;
}
.carousel-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: all .3s;
}
.carousel-dots .dot.active {
  width: 16px;
  border-radius: 3px;
  background: #e4572e;
}

/* ===== 手机端 ===== */
@media (max-width: 768px) {
  .carousel-container { height: 128px; }
  .carousel-track { --step: 75px; --scale: 1.25; }
  .carousel-item { width: 58px; }
  .carousel-cover { border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
  .carousel-title { font-size: 10px; margin-top: 4px; }
  .carousel-btn { opacity: 1; width: 22px; height: 22px; font-size: 14px; }
  .carousel-prev { left: 4px; }
  .carousel-next { right: 4px; }
  .carousel-dots { margin-top: 2px; gap: 5px; }
  .carousel-dots .dot { width: 5px; height: 5px; }
  .carousel-dots .dot.active { width: 14px; }
  .hero-carousel {padding: 8px;}
}

@media (max-width: 380px) {
  .carousel-container { height: 114px; }
  .carousel-track { --step: 57px; --scale: 1.2; }
  .carousel-item { width: 51px; }
}

/* 第三列：公告栏 */
.hero-notice{position:relative;overflow:hidden;background:var(--card);background-image: url(/css/img/9f59488.png);display:flex;flex-direction:column}
.notice{position:relative;z-index:2;padding:0;margin:0;list-style:none}

.notice li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;color:var(--txt);display:flex;justify-content:space-between;gap:10px}

.notice li:last-child{border-bottom:none}

.notice time{color:var(--sub);font-size:12px;white-space:nowrap;flex-shrink:0}

.notice a{color:var(--txt);text-decoration:none;transition:color .2s;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.notice a:hover{color:var(--pink)}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:14px}
  .hero{height:auto}
  .carousel-wrapper{height:280px}
}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:14px}
  .hero{height:auto}
  .hero-card{padding:16px}
  .carousel-wrapper{height:130px}
  .carousel-item{flex:0 0 auto}
}

/* ===== 主体三栏 ===== */
.main{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap: 10px; margin-top: 10px;align-items:start}
.col-c{min-width:0}

/* 区块卡片 */
.block{background:var(--card);border-radius:8px;box-shadow:0 2px 10px rgba(30,30,60,.05);margin-bottom:12px;overflow:hidden}
.block-hd{display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.block-hd h2{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.block-hd h2::before{content:"";width:4px;height:17px;border-radius:2px;background:linear-gradient(180deg,var(--pink),var(--purple))}
.block-hd a{font-size:12px;color:var(--sub)}
.block-hd a:hover{color:var(--pink)}

/* 榜单 */
.rank{padding:6px 0}
.rank li{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:13px;transition:background .2s}
.rank li:hover{background:#faf7fb}
.rank .no{flex:none;width:20px;height:20px;border-radius:6px;background:#eef0f6;color:#8a8aa0;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}
.rank li:nth-child(1) .no,.rank li:nth-child(2) .no,.rank li:nth-child(3) .no{background:linear-gradient(135deg,#ff7ba2,#fb7299);color:#fff}
.rank li:nth-child(4) .no,.rank li:nth-child(5) .no,.rank li:nth-child(6) .no{background:#fde3ec;color:#e2567f}
.rank a{flex:1;max-width: 30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.rank a:hover{color:var(--pink)}
.rank .num{color:var(--sub);font-size:12px;white-space:nowrap}
.more-link{display:block;text-align:center;padding:5px;font-size:12px;color:var(--pink);background:#fdf6f8;border-top:1px solid var(--line)}

/* 书封网格 */
.books{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:18px}
.book{text-align:center}
.book .cover{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:92/120;background:#ececf4;margin-bottom:8px;box-shadow:0 4px 10px rgba(30,30,50,.12);transition:transform .25s,box-shadow .25s}
.book:hover .cover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(251,114,153,.28)}
.book .cover img{width:100%;height:100%;object-fit:cover}
.book .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));opacity:0;transition:.25s}
.book:hover .cover::after{opacity:1}
.book .tag{position:absolute;left:0;top:0;z-index:2;background:linear-gradient(90deg,var(--pink),#ff8fb0);color:#fff;font-size:10px;padding:2px 8px;border-radius:0 0 10px 0}
.book .tag.purple{background:linear-gradient(90deg,var(--purple),#a78bfa)}
.book .tag.blue{background:linear-gradient(90deg,#38a8e8,#6cc7f5)}
.book .tag.green{background:linear-gradient(90deg,#2fbf9a,#5cd6b6)}
.book .tag.orange{background:linear-gradient(90deg,#ff8a3c,#ffab6e)}
.book .tag.red{background:linear-gradient(90deg,#e84560,#ff7d92)}
.book b{display:block;font-size:13px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;min-height:2.6em;line-height:1.3}
.book b:hover{color:var(--pink)}
.book i{display:block;font-style:normal;font-size:11px;color:var(--sub);margin-top:3px}

/* 更新列表 */
.updates { padding: 6px 18px 12px; }
.updates li { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.updates li:last-child { border-bottom: none; }
.updates .cate 
{ flex: none; width: 80px; text-align: center; font-size: 11px; color: #98516a; background: #f5f4f5; border-radius: 4px; padding: 2px 8px; box-sizing: border-box; }
.updates .cate.blue { color: #3b8fd4; background: #e3f1fd; }
.updates .cate.green { color: #1f9e7d; background: #e0f6f0; }

/* 标题 t*/
.updates a.t { flex: 1; max-width: 36ch; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.updates a.t:hover { color: var(--pink); }

/* 副标题 ch*/
.updates .ch { flex: none; max-width: 20ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sub); }
.updates .ch:hover { color: var(--pink); }
.updates time { flex: none; font-size: 12px; margin-left:auto; color: var(--sub); }

/* 分类 */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px}
.cats a{border:1px solid var(--line);border-radius:10px;padding:12px 0;text-align:center;font-size:13px;color:var(--txt);transition:.2s}
.cats a:hover{border-color:var(--pink);color:var(--pink);background:#fdf3f6;transform:translateY(-2px)}

/* 友链/侧栏小卡 */
.mini-link{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 18px}
.mini-link a{border:1px solid var(--line);border-radius:8px;text-align:center;padding:8px 0;font-size:12px;color:var(--sub);transition:.2s}
.mini-link a:hover{color:var(--pink);border-color:var(--pink)}

/* 页脚 */
footer{background:#1c1c28;color:#8f8fa5;margin-top:28px;padding:34px 0 22px;font-size:13px}
footer .wrap{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
footer a{color:#b8b8cc;margin:0 8px}
footer a:hover{color:var(--pink)}
footer .flinks{display:flex;flex-wrap:wrap;justify-content:center}

/* 返回顶部 */
.top-btn{position:fixed;right:18px;bottom:24px;width:42px;height:42px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-size:18px;cursor:pointer;box-shadow:0 6px 16px rgba(251,114,153,.4);opacity:0;pointer-events:none;transition:.3s}
.top-btn.show{opacity:1;pointer-events:auto}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .main{grid-template-columns:230px minmax(0,1fr)}
  .books{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .banner{min-height:200px;padding:26px}
  .banner h1{font-size:22px}
  .main{grid-template-columns:minmax(0,1fr)}
  .books{grid-template-columns:repeat(3,1fr)}
  .hd{flex-wrap:wrap;height:auto;padding:10px 0;gap:12px}
  .search{order:3;max-width:none;flex-basis:100%}
  .hd-link{display:none}
  nav{top:0}
  header{position:relative}
  .updates .ch{max-width:34%}
}
@media (max-width:480px){
  .books{grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .banner{padding:22px 20px}
  .banner p{font-size:12px}
}


/* ============================================================
   手机端兼容优化补丁  —— 追加到 style 末尾
   ============================================================ */

/* ---------- 1. 顶部细条 ---------- */
@media (max-width:768px){
  .topbar .wrap{height:30px;font-size:11px;padding:0 12px}
}

/* ---------- 2. 主导航（手机端横向滑动标签条）---------- */
@media (max-width:820px){
  nav{box-shadow:0 2px 8px rgba(30,30,60,.05)}
  nav .nav-in{padding-top:0;padding-bottom:0;overscroll-behavior-x:contain}
  .nav-in a{flex:1 0 auto;padding:12px 10px;font-size:14px;text-align:center}
}
@media (max-width:380px){
  .nav-in a{padding:12px 8px;font-size:13px}
}

/* ---------- 3. Hero 区域 ---------- */
@media (max-width:820px){
  .hero{margin:14px auto}
  .hero-grid{grid-template-columns:1fr;gap:12px}
  .banner{min-height:170px;padding:24px 20px;border-radius:12px}
  .banner h1{font-size:21px;line-height:1.35}
  .banner p{font-size:12.5px;margin-top:8px}
  .banner .tags{margin-top:14px;gap:8px}
  .banner .tags i{font-size:11px;padding:3px 12px}
  .side-card{border-radius:12px;padding:16px}
}

/* ---------- 4. 主体布局 ---------- */
@media (max-width:820px){
  .wrap{padding:5px 7px}
  .main{grid-template-columns:1fr;gap:10px;margin-top:14px;display: block;}
  .block{min-width:0;}
  .col-l, .col-c { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .block-hd h2 { min-width: 0; } 
  .block-hd > a { flex-shrink: 0; white-space: nowrap; }
  /* 榜单卡片收窄内边距，避免标题+日期挤压换行错乱 */
  .rank li{gap:8px}
  .rank .no{width:19px;height:19px;font-size:11px;flex:none}
  .rank a{font-size:16px;min-width:0}
  .rank .num{font-size:11px; margin-left:auto;}

  /* 书封 3 列时缩小间距 */
  .books{grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
  .book b{font-size:12px}
  .book i{font-size:10.5px}

  /* 更新列表：隐藏章节列，避免三列挤爆小屏 */
  .updates{padding:4px 14px 10px}
  .updates li{gap:6px}
  .updates .cate{font-size:13px;padding:2px 6px}
  .updates a.t{font-size:14px;min-width:0}
  .updates .ch{display:none}
  .updates time{font-size:11px}
  .link-list {flex-direction: column;}
}

/* ---------- 5. 超小屏（≤480px）---------- */
@media (max-width:480px){
  .banner h1{font-size:18px}
  .banner p{display:none}                 /* 极小屏隐藏副标题，更干净 */
  .banner .tags{margin-top:10px}

  .books{grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 10px}
  .book .tag{font-size:9px;padding:1px 6px}
  .cats{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
  .cats a{font-size:12px;padding:10px 0}

  /* 榜单在极小屏隐藏日期/数字，优先保证书名可读 
  .rank li:nth-child(n+11) .num{display:none}
	*/
  .block-hd{padding:12px 14px}
  .block-hd h2{font-size:15px}
  .more-link{font-size:12px}
}

/* ---------- 6. 通用修复（所有尺寸生效）---------- */
/* 防止 flex 子项溢出 */
.rank a,.updates a.t,.notice li{min-width:0}
/* 图片自适应容器 */
.book .cover img{max-width:100%}
/* 防止长英文/数字书名撑破布局 */
.rank li,.updates li{overflow:hidden}


/* 循环滚动容器样式 */
.carousel-container-month-click,
.carousel-container-month-vote {
  display: block;
  width: calc(100% + 10px);
  min-width: 0;
  margin-left: -5px;
  overflow: hidden;
  padding: 10px 18px;
}

.carousel-track-month-click,
.carousel-track-month-vote {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 14px;
  transition: transform 0.8s ease-in-out;
}

.carousel-item-month {
  flex: 0 0 calc((100% - 56px) / 5);
  min-width: 0;
  text-align: center;
}

.carousel-item-month .cover {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 92/120;
  background: #ececf4;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(30,30,50,.12);
  transition: transform .25s,box-shadow .25s;
}

.carousel-item-month .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item-month b {
  display: block;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  font-size: 13px;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.carousel-item-month i {
  display: block;
  color: #999;
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 基础标签 */
.blwk_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.blwk_tag:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* ===== 渐变色标签 ===== */
.blwk_tag--pink {
  color: #fff;
  background: linear-gradient(135deg, #ff6f9f, #ff9fbd);
  box-shadow: 0 3px 8px rgba(255, 111, 159, 0.22);
}

.blwk_tag--green {
  color: #fff;
  background: linear-gradient(135deg, #2fbf9a, #5cd6b6);
  box-shadow: 0 3px 8px rgba(47, 191, 154, 0.22);
}

.blwk_tag--orange {
  color: #fff;
  background: linear-gradient(135deg, #ff8a3c, #ffb16e);
  box-shadow: 0 3px 8px rgba(255, 138, 60, 0.22);
}

.blwk_tag--purple {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #b49aff);
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.22);
}

.blwk_tag--red {
  color: #fff;
  background: linear-gradient(135deg, #e84560, #ff7d92);
  box-shadow: 0 3px 8px rgba(232, 69, 96, 0.22);
}

.blwk_tag--blue {
  color: #fff;
  background: linear-gradient(135deg, #38a8e8, #6cc7f5);
  box-shadow: 0 3px 8px rgba(56, 168, 232, 0.22);
}

/* ===== 浅色背景标签 ===== */
.blwk_tag-_soft {
  box-shadow: none;
}

.blwk_tag_soft--pink {
  color: #e84f83;
  background: #ffebf2;
  border: 1px solid #f5b8cc;
}

.blwk_tag_soft--green {
  color: #1f9e7d;
  background: #e0f6f0;
  border: 1px solid #a8dfd0;
}

.blwk_tag_soft--orange {
  color: #e7792b;
  background: #fff0e3;
  border: 1px solid #f4c7a3;
}

.blwk_tag_soft--purple {
  color: #8055db;
  background: #f0eaff;
  border: 1px solid #cdbcf5;
}

.blwk_tag_soft--red {
  color: #d93650;
  background: #ffe8ec;
  border: 1px solid #f2b5c0;
}

.blwk_tag_soft--blue {
  color: #287fbd;
  background: #e3f1fd;
  border: 1px solid #afd4f1;
}

/* tag标签首页*/

.tag-menu-healing {
    background: #ffffff; /* 纯白背景 */
    padding: 2px 0;
    width: 100%;
}

/* 外部容器：居中 */
.tag-outer-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

/* 内部滚动容器：单行不换行 */
.tag-scroll-box {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 1280px;
    padding: 4px 2px;
}
.tag-scroll-box::-webkit-scrollbar {
    display: none;
}

/* 单个 Tag 样式：基础结构，配色由下面的 .tag-pill--c* 随机分配 */
.tag-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #fcf8f9;
    border: 1px solid #f0e9e2;
    color: #0f172a;        /* 深色文字，提升可读性 */
    background: #f1f5f9;  
}

/* 多套配色：页面加载时由脚本随机选一套 */
.tag-pill--c1 { color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; } /* 蓝灰 */
.tag-pill--c2 { color: #0f172a; background: #f1f5f9; border: 1px solid #e2e8f0; } /* 深色文字 */
.tag-pill--c3 { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; } /* 翠绿 */
.tag-pill--c4 { color: #897451; background: #faf7f1; border: 1px solid #eae0cf; } /* 温暖治愈色 */
.tag-pill--c5 { color: #9d174d; background: #fdf2f8; border: 1px solid #fbcfe8; } /* 淡粉 */
.tag-pill--c6 { color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; } /* 淡紫 */
.tag-pill--c7 { color: #9b6277; background: #fbf5f7; border: 1px solid #ead9df; } /* 雅致暖灰粉 */
.tag-pill--c8 { color: #49836d; background: #f1f8f5; border: 1px solid #d5e9df; } /* 清新绿 */
.tag-pill--c9 { color: #8c5344; background: #fdf7f4; border: 1px solid #f3dfd6; } /* 暖红棕色 */
.tag-pill--c10 { color: #3b663b; background: #f4f8f3; border: 1px solid #d4e6d4; } /* 森林深绿 */
.tag-pill--c11 { color: #9376a8; background: #fbf9fc; border: 1px solid #dccadc; } /* 介于紫与粉之间的柔和文字色 */
.tag-pill--c12 { color: #33597d; background: #f2f7fa; border: 1px solid #d0e1f0; } /* 晴空深蓝 */
.tag-pill--c13 { color: #7262e0; background: #fdf5f7; border: 1px solid #ebd0d9; } /* 偏深的星空紫 */

/* 悬停（Hover）交互：切换为清新浅蓝色 */
.tag-pill:hover {
    color: #0284c7; /* 清爽明亮的蓝色 */
    background: #f0f9ff; /* 极浅的天蓝色背景 */
    border-color: #bae6fd; /* 浅蓝边框 */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.1);
}

/* 治愈系小圆点：默认浅灰，悬停变亮蓝 */
.tag-pill::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #94a3b8; /* 浅灰色小点 */
    background: #edc6d4; /* 浅灰色小点 */
    border-radius: 50%;
    margin-right: 6px;
    opacity: 0.7;
    transition: opacity 0.25s, background 0.25s;
}

.tag-pill:hover::before {
    opacity: 1;
    background: #0ea5e9; /* 悬停时转为清澈蓝色 */
}

.user-icon {
    width: 1.2em;
    height: 1.2em;
    color: #fff;
    stroke: #fff;
    fill: none;
    vertical-align: -0.12em;
    margin-right: 3px;
}