:root{
  --pink:#FB7299; --pink-d:#e85f89; --purple:#7B61FF; --ink:#2b2b3a;
  --bg:#f5f6fa; --card:#ffffff; --line:#ececf3; --txt:#4a4a5a; --sub:#9a9ab0;
}
*{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}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}

/* ===== 顶部 ===== */
.topbar{background:#23232f;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{background:linear-gradient(120deg,#1c1c28 0%,#2d2140 55%,#3b1f3d 100%);position:sticky;top:0;padding-bottom: 10px;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.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),var(--purple));border-radius:10px;width:38px;height:38px;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),#ff8fb0);color:#fff;font-size:13px;cursor:pointer;font-weight:600}
.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);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}
.hero-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:16px}
.banner{border-radius:14px;overflow:hidden;position:relative;min-height:170px;background:linear-gradient(120deg,#efe7f5,#f5ebf3 55%,#f9eaf0);display:flex;align-items:center;padding:22px 32px;color:#2c2538;box-shadow:0 4px 14px rgba(150,120,180,.06)}
.banner::before{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(251,114,153,.18),transparent 70%)}
.banner::after{content:"";position:absolute;right:120px;bottom:-70px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(123,97,255,.14),transparent 70%)}
.banner h1{font-size:24px;line-height:1.3;margin-bottom:8px;position:relative;z-index:2;color:#231d30;font-weight:600}
.banner h1 span{color:#b84b6b}
.banner p{color:#5a5268;font-size:13px;position:relative;z-index:2; max-width: 100%;}
.banner .tags{position:relative;z-index:2;margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.banner .tags i{font-style:normal;background:rgba(255,255,255,.7);border:1px solid rgba(180,150,200,.3);border-radius:20px;padding:3px 14px;font-size:12px;color:#4a3e5a;backdrop-filter:blur(2px)}
.side-card{background:var(--card);border-radius:14px;padding:18px 22px;box-shadow:0 2px 10px rgba(30,30,60,.05);display:flex;flex-direction:column}
.side-card h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.side-card h3::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--pink),var(--purple))}
.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}
.notice a:hover{color:var(--pink)}
.entry-links{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.entry-links .entry-title{font-size:12px;color:var(--pink-d);letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.entry-links .entry-title::before{content:"🌟";font-size:13px}
.link-list{display:flex;flex-direction:row;gap:8px}
.link-item{display:flex;align-items:center;gap:8px;background:#f8f5ff;border:1px solid #ece5f5;border-radius:10px;padding:9px 12px;text-decoration:none;color:#322b40;font-size:13px;font-weight:500;transition:all .2s ease}
.link-item:hover{background:#f0e9ff;border-color:#d9c9f0;transform:translateY(-1px);box-shadow:0 4px 10px rgba(140,110,180,.08);color:#241e30}
.link-item .domain-icon{font-size:15px;opacity:.8}
.link-item .domain-text{flex:1;word-break:break-all}
.link-item .arrow{color:#b8a6d0;font-size:13px;transition:transform .2s}
.link-item:hover .arrow{transform:translateX(3px);color:var(--purple)}
@media (max-width:760px){
.hero-grid{grid-template-columns:1fr;gap:14px}
.banner{min-height:150px;padding:18px 22px}
.banner h1{font-size:20px}
.banner p{font-size:12px}
.side-card{padding:16px}
}

/* ===== 主体三栏 ===== */
.main{display:grid;grid-template-columns:250px 1fr 250px;gap:18px;margin-top:18px;align-items:start}

/* 区块卡片 */
.block{background:var(--card);border-radius:14px;box-shadow:0 2px 10px rgba(30,30,60,.05);margin-bottom:18px;overflow:hidden}
.block-hd{display: flex; align-items: center; justify-content: space-between; padding: 14px 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:10px;font-size:13px;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;-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: #e2567f; background: #fde3ec; 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 1fr}
  .col-r{display:none}
  .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: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}
}

/* ---------- 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 12px}
  .main{grid-template-columns:1fr;gap:14px;margin-top:14px;}
  .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}