/* 羞羞漫画 - 粉色少女主题, 全新排版
   圆润卡片、粉色渐变、少女风 banner, 区别于其他站 */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:linear-gradient(180deg,#fff5f8 0%,#ffe8f0 100%);
  color:#5a4a52; line-height:1.6; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* 顶部 */
.topbar {
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:50; border-bottom:1px solid #ffd6e2;
  display:flex; align-items:center; gap:20px; padding:12px 24px;
}
.logo { font-size:21px; font-weight:800; color:#ff5e87; display:flex; align-items:center; gap:8px; }
.logo small { font-size:12px; color:#c9a3b0; font-weight:400; }
.nav { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.nav a { color:#a47a86; padding:6px 14px; border-radius:20px; font-size:14px; transition:.2s; }
.nav a:hover { color:#ff5e87; background:#fff0f4; }
.nav a.act { color:#fff; background:linear-gradient(135deg,#ff7aa2,#ff5e87); }
.mc { display:none; }
.mt { display:none; font-size:22px; color:#ff5e87; cursor:pointer; margin-left:auto; }

/* banner */
.hero { position:relative; height:340px; overflow:hidden; }
.hero img { width:100%; height:100%; object-fit:cover; opacity:.45; }
.hov {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,245,248,.96) 0%,rgba(255,245,248,.7) 45%,transparent 72%);
  display:flex; flex-direction:column; justify-content:center; padding:0 60px;
}
.hov .tag { align-self:flex-start; background:linear-gradient(135deg,#ff7aa2,#ff5e87); color:#fff; font-size:12px; padding:3px 12px; border-radius:20px; margin-bottom:14px; }
.hov h1 { font-size:34px; font-weight:800; color:#d13a5f; margin-bottom:10px; }
.hov p { color:#9a6a76; max-width:480px; font-size:14px; }
.hov .hmeta { margin-top:14px; color:#c9a3b0; font-size:13px; display:flex; gap:16px; }
.hov .hbtn { align-self:flex-start; margin-top:18px; background:#ff5e87; color:#fff; padding:10px 28px; border-radius:24px; font-weight:700; font-size:14px; box-shadow:0 6px 18px rgba(255,94,135,.4); }

/* 内容 */
.container { max-width:1200px; margin:0 auto; padding:30px 20px; }
section { margin-bottom:38px; }
.sec { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.sec h2 { font-size:21px; font-weight:800; color:#d13a5f; }
.sec .more { color:#c9a3b0; font-size:13px; }
.sec .more:hover { color:#ff5e87; }

/* 漫画卡片(圆润悬浮) */
.cgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px; }
.ccard {
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 4px 16px rgba(255,120,150,.18);
  transition:.3s;
}
.ccard:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(255,120,150,.32); }
.cimg { position:relative; aspect-ratio:3/4; overflow:hidden; background:#ffe8f0; }
.cimg img { width:100%; height:100%; object-fit:cover; }
.cstatus { position:absolute; top:10px; left:10px; background:rgba(255,94,135,.9); color:#fff; font-size:11px; padding:2px 10px; border-radius:14px; }
.chot { position:absolute; bottom:10px; right:10px; background:rgba(255,255,255,.85); color:#ff5e87; font-weight:800; font-size:13px; padding:2px 10px; border-radius:14px; }
.cbody { padding:12px 14px 14px; }
.cbody h3 { font-size:15px; font-weight:700; color:#d13a5f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbody .cmeta { margin-top:6px; font-size:12px; color:#c9a3b0; display:flex; justify-content:space-between; }

/* 排行榜 */
.rlist { display:flex; flex-direction:column; gap:12px; }
.ritem { display:flex; align-items:center; gap:16px; background:#fff; border-radius:14px; padding:10px 18px; box-shadow:0 3px 12px rgba(255,120,150,.15); transition:.2s; }
.ritem:hover { box-shadow:0 8px 22px rgba(255,120,150,.3); }
.rno { font-size:24px; font-weight:900; width:40px; text-align:center; color:#e8c9d3; }
.ritem:nth-child(-n+3) .rno { color:#ff5e87; }
.rthumb { width:64px; height:88px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.rthumb img { width:100%; height:100%; object-fit:cover; }
.rinfo { flex:1; min-width:0; }
.rinfo h3 { font-size:16px; font-weight:700; color:#d13a5f; }
.rinfo .rmeta { color:#c9a3b0; font-size:12px; margin-top:4px; }
.rscore { color:#ff5e87; font-weight:800; font-size:15px; }

/* 分类页头 */
.pagehead { margin-bottom:22px; }
.pagehead h1 { font-size:26px; font-weight:800; color:#d13a5f; margin-bottom:6px; }
.pagehead p { color:#c9a3b0; font-size:14px; }

/* 详情 */
.dwrap { display:flex; gap:28px; margin-top:20px; }
.dimg { width:280px; flex-shrink:0; aspect-ratio:3/4; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(255,120,150,.28); }
.dimg img { width:100%; height:100%; object-fit:cover; }
.dinfo h1 { font-size:30px; font-weight:800; color:#d13a5f; margin-bottom:12px; }
.dtags { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.dtags span { background:#fff; color:#b87a88; font-size:12px; padding:4px 14px; border-radius:20px; box-shadow:0 2px 6px rgba(255,120,150,.15); }
.ddesc { background:#fff; border-radius:16px; padding:18px 20px; margin-top:18px; box-shadow:0 3px 14px rgba(255,120,150,.15); }
.ddesc h3 { font-size:16px; color:#ff5e87; margin-bottom:10px; }
.ddesc p { color:#8a6a74; font-size:14px; line-height:1.9; }
.dbtns { margin-top:18px; display:flex; gap:12px; }
.dbtns .ghost { background:#fff; color:#ff5e87; padding:10px 24px; border-radius:22px; font-weight:700; box-shadow:0 2px 8px rgba(255,120,150,.2); }
.back { display:inline-block; color:#c9a3b0; font-size:13px; margin-top:14px; }
.back:hover { color:#ff5e87; }
.note { color:#d8b9c3; font-size:12px; margin-top:14px; font-style:italic; }

.foot { text-align:center; padding:24px; color:#d8b9c3; font-size:13px; border-top:1px solid #ffd6e2; margin-top:30px; }

@media (max-width:768px) {
  .mt { display:block; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:10px; box-shadow:0 8px 20px rgba(255,120,150,.2); }
  .mc:checked ~ .nav { display:flex; }
  .hero { height:230px; }
  .hov { padding:0 24px; }
  .hov h1 { font-size:24px; }
  .dwrap { flex-direction:column; }
  .dimg { width:100%; aspect-ratio:16/9; }
}