:root{
  --pink:#ff69b4;
  --pink-deep:#e85aa3;
  --pink-soft:#fff0f5;
  --pink-tag:#ffe6f2;
  --pink-tag2:#f3e8ff;
  --text:#333;
  --muted:#888;
  --page-bg:#faf7f9;
  --cat-icon-bg:#fff5f8;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--page-bg);color:var(--text)}

/* ===== 顶栏（浅底 + 粉方 Logo + 居中导航） ===== */
.site-header{background:var(--pink-soft);border-bottom:1px solid #ffd6e8;padding:10px 0;box-shadow:0 2px 14px rgba(255,105,180,.08)}
.header-row{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-wrap{flex:1;display:flex;justify-content:center;min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-icon{
  width:44px;height:44px;border-radius:12px;background:var(--pink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 14px rgba(255,105,180,.35);
}
.brand-icon svg{width:26px;height:26px;display:block}
.brand-text{font-size:20px;font-weight:800;color:#222;letter-spacing:.02em}
.nav-main{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center}
.nav-main a{
  color:#444;text-decoration:none;font-size:14px;padding:8px 14px;border-radius:10px;transition:.2s;white-space:nowrap;
}
.nav-main a:hover{color:var(--pink);background:rgba(255,105,180,.08)}
.nav-main a.is-active{background:#ffe0ef;color:var(--pink-deep);font-weight:600}
.header-end{display:flex;align-items:center;gap:12px;flex-shrink:0;flex-wrap:wrap}
.header-search{min-width:160px;max-width:240px}
.search-form{display:flex;align-items:center;background:#fff;border:1px solid #ffd6e8;border-radius:999px;padding:2px 2px 2px 14px;box-shadow:0 2px 8px rgba(255,105,180,.1)}
.search-form input{flex:1;border:0;outline:0;font-size:13px;padding:8px 4px;background:transparent;min-width:0}
.search-form button{
  width:38px;height:38px;border:0;border-radius:50%;background:var(--pink);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;
}
.search-form button:hover{background:var(--pink-deep)}
.search-form button svg{display:block}
.auth-link{color:#555;text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:8px}
.auth-link:hover{color:var(--pink);background:#fff}
.auth-btn{
  background:var(--pink);color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;box-shadow:0 4px 12px rgba(255,105,180,.35);transition:.2s;
}
.auth-btn:hover{background:var(--pink-deep)}

/* ===== Hero（整幅底图 cover + 左文右卡叠放，类轮播横幅） ===== */
.hero{
  --hero-bg:url("static/picture/f7be4f3823bfd3c69c184b196c40c0b9.jpg");
  position:relative;
  overflow:hidden;
  background:var(--pink-soft) var(--hero-bg) center/cover no-repeat;
  min-height:min(420px,52vw);
}
@media(min-width:900px){
  .hero{min-height:400px}
}
.hero::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(
    105deg,
    rgba(255,252,253,.97) 0%,
    rgba(255,248,252,.9) 18%,
    rgba(255,240,248,.55) 38%,
    rgba(255,230,245,.22) 55%,
    rgba(40,20,35,.12) 100%
  );
}
.hero-inner{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:40px 20px 20px;
  display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,300px);
  gap:28px 32px;align-items:center;justify-content:space-between;
  min-height:min(380px,48vw);
}
.hero-copy{
  max-width:440px;
}
.hero-copy h1{
  margin:0 0 14px;font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:800;color:#1a1a1a;line-height:1.2;
  text-shadow:0 0 24px rgba(255,255,255,.95),0 1px 0 #fff;
}
.hero-copy .lead{
  margin:0 0 22px;font-size:15px;color:#333;line-height:1.75;max-width:400px;
  text-shadow:0 0 12px rgba(255,255,255,.9);
}
.hero-cta{
  display:inline-block;background:linear-gradient(135deg,#ff69b4,#ff4da6);color:#fff;text-decoration:none;font-size:15px;font-weight:600;padding:12px 32px;border-radius:14px;
  box-shadow:0 8px 24px rgba(255,105,180,.45);transition:.25s;
}
.hero-cta:hover{filter:brightness(1.05);transform:translateY(-2px)}
.hero-dots{
  position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:8px;
  padding:8px 20px 22px;max-width:1200px;margin:0 auto;
}
.hero-dots button{
  width:8px;height:8px;padding:0;border:1px solid rgba(255,105,180,.5);border-radius:50%;background:rgba(255,255,255,.55);cursor:default;
}
.hero-dots button.is-active{width:22px;border-radius:999px;background:var(--pink);border-color:var(--pink)}
.today-panel{
  justify-self:end;width:100%;max-width:300px;
  background:rgba(255,255,255,.96);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);
}
.today-panel h2{margin:0 0 12px;font-size:15px;font-weight:700;color:#222;display:flex;align-items:center;gap:6px}
.today-panel h2::before{content:"";display:inline-block;width:4px;height:14px;background:var(--pink);border-radius:2px;margin-right:8px}
.today-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f3e8ee;text-decoration:none;color:inherit;transition:.2s}
.today-row:last-child{border-bottom:0}
.today-row:hover{background:var(--pink-soft);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:10px}
.today-row img{width:44px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0}
.today-row .t{flex:1;min-width:0}
.today-row .t strong{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-row .t small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.badge-new{font-size:10px;font-weight:700;background:var(--pink);color:#fff;padding:2px 7px;border-radius:4px;flex-shrink:0}

/* ===== 通用区块 ===== */
.container{max-width:1200px;margin:0 auto;padding:32px 20px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.section-head h2{margin:0;font-size:20px;font-weight:800}
.section-head a{font-size:14px;color:var(--pink);text-decoration:none;font-weight:600}
.section-head a:hover{text-decoration:underline}
.section-head--list h2{margin:0}
.section-head-title{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:800;color:#111;letter-spacing:.02em}
.section-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--pink);flex-shrink:0}
.section-ico svg{width:20px;height:20px;display:block}
.section-head--list .section-more{font-size:13px;color:#999;font-weight:400;text-decoration:none}
.section-head--list .section-more:hover{color:#666}
.section-head--cats h2{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:#333}
.section-head-ico{
  width:32px;height:32px;border-radius:50%;
  background:var(--pink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 14px rgba(255,105,180,.35),inset 0 1px 0 rgba(255,255,255,.35);
}
.section-head-ico svg{width:15px;height:15px;display:block;color:#fff;filter:drop-shadow(0 1px 0 rgba(200,60,120,.2))}

/* ===== 分类（白底横卡 + 浅粉圆标 + 线性图标） ===== */
.cat-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.cat-chip{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:14px 12px;text-decoration:none;color:inherit;
  border:1px solid #f0f0f0;box-shadow:0 2px 14px rgba(0,0,0,.06);transition:.25s;
}
.cat-chip:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(255,170,200,.22);border-color:#ffd0e4}
.cat-chip--more .cat-count{color:#999;font-weight:500;letter-spacing:.02em}
.cat-icon{
  width:48px;height:48px;border-radius:50%;
  color:var(--pink);
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.25) 32%,transparent 46%),
    linear-gradient(155deg,#fffafc 0%,#ffe8f4 42%,#ffd6ea 100%);
  border:1px solid rgba(255,200,220,.95);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.9),
    inset 0 -1px 3px rgba(255,190,215,.35),
    0 4px 14px rgba(255,105,180,.22);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}
.cat-chip:hover .cat-icon{
  transform:scale(1.08);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.95),
    0 6px 20px rgba(255,105,180,.35);
}
.cat-icon svg{
  width:24px;height:24px;display:block;flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(255,105,180,.35));
}
.cat-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.cat-name{font-size:14px;font-weight:700;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.cat-count{font-size:12px;color:#999;line-height:1.2}

/* ===== 热门推荐（封面底条 + 黑标题 + 浅粉标签 + 灰更新） ===== */
.comic-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
.comic-card{
  background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;color:var(--text);
  box-shadow:0 4px 18px rgba(0,0,0,.06);transition:.3s;border:1px solid #eee;
}
.comic-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.comic-cover{position:relative;display:block;overflow:hidden}
.comic-cover img{width:100%;height:240px;object-fit:cover;display:block}
.comic-cover__status{
  position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:11px;font-weight:600;color:#fff;text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.35) 65%,transparent 100%);
}
.comic-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:0;min-height:108px}
.comic-info h3{
  font-size:15px;margin:0 0 8px;font-weight:800;color:#000;line-height:1.35;min-height:2.55em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;
}
.comic-info .tags{margin-bottom:2px}
.tags span{
  display:inline-block;background:#fff0f5;color:#e04d6d;padding:2px 7px;margin:0 5px 4px 0;font-size:11px;border-radius:4px;font-weight:600;line-height:1.35;
}
.comic-info .ep{font-size:12px;color:#999;margin:6px 0 0;line-height:1.4}

/* ===== 最新更新（左图 | 标题+话数 | 右侧时间） ===== */
.update-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.update-item{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 2px 12px rgba(0,0,0,.05);
  text-decoration:none;color:inherit;transition:.2s;border:1px solid #eee;
}
.update-item:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.update-item > img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}
.update-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-self:center}
.update-info h3{font-size:14px;margin:0;font-weight:800;color:#000;line-height:1.3}
.update-info .update-chap{font-size:12px;color:#999;margin:0;line-height:1.3}
.update-info .tags{margin-top:5px;display:flex;flex-wrap:wrap;gap:0}
.update-info .tags span{margin-bottom:0;font-size:10px;padding:2px 6px}
.update-time{margin-left:auto;align-self:center;font-size:12px;color:#999;white-space:nowrap;flex-shrink:0}

/* ===== 热门标签 ===== */
.block-title{font-size:20px;font-weight:800;margin:0 0 16px}
.seo-tags{display:flex;flex-wrap:wrap;gap:10px}
.seo-tags a{
  background:var(--pink-tag);color:var(--pink);padding:8px 14px;border-radius:20px;font-size:13px;text-decoration:none;font-weight:500;
  transition:.2s;
}
.seo-tags a:hover{background:#ffd6ea;color:var(--pink-deep)}

.home-seo{margin-top:28px;padding:20px;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.04);font-size:14px;color:#555;line-height:1.85}
.home-seo p{margin:0 0 12px}
.home-seo p:last-child{margin-bottom:0}
.home-seo a{color:var(--pink);font-weight:600}

.site-footer{background:#1a1520;color:#aaa;padding:36px 20px 28px;margin-top:8px}
.site-footer a{color:#ffb6d9;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-main{max-width:1100px;margin:0 auto 24px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 36px}
.footer-title{margin:0 0 14px;font-size:15px;font-weight:700;color:#ece6f2;letter-spacing:.02em}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:0 0 10px}
.footer-links li:last-child{margin-bottom:0}
.footer-links a{font-size:14px}
.footer-bottom{text-align:center;border-top:1px solid #2d2633;padding-top:22px;margin-top:4px;max-width:900px;margin-left:auto;margin-right:auto}
.footer-copyright{font-size:13px;color:#9a939e;margin:0 0 12px;line-height:1.75}
.footer-meta{font-size:13px;color:#8a8390;margin:0;line-height:1.7}
.footer-domain{color:#ffc2dc;font-weight:600;word-break:break-all}
.footer-meta-sep{margin:0 10px;color:#5c5460;-webkit-user-select:none;user-select:none}
@media(max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-meta .footer-meta-sep{display:block;height:6px;visibility:hidden;margin:0}
}

@media(max-width:1199px){
  .cat-strip{grid-template-columns:repeat(4,1fr)}
  .comic-grid{grid-template-columns:repeat(4,1fr)}
  .update-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:991px){
  .hero{min-height:360px}
  .hero-inner{grid-template-columns:1fr;text-align:center;min-height:auto;padding-top:28px}
  .hero-copy{margin:0 auto;max-width:100%}
  .hero-copy .lead{margin-left:auto;margin-right:auto}
  .today-panel{justify-self:center;max-width:400px}
  .header-row{flex-wrap:wrap}
  .nav-wrap{order:3;width:100%;flex:none}
  .header-end{margin-left:auto}
  .header-search{max-width:100%;flex:1;min-width:140px}
  .cat-strip{grid-template-columns:repeat(4,1fr)}
  .comic-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .nav-main{width:100%}
  .header-end{width:100%;justify-content:flex-end}
  .cat-strip{grid-template-columns:repeat(2,1fr)}
  .comic-grid{grid-template-columns:repeat(2,1fr)}
  .update-grid{grid-template-columns:1fr}
}
/* --- 面包屑（列表 / 关于） --- */
.breadcrumb{padding:12px 20px;font-size:14px;background:#e8eaf0;color:#333;max-width:1200px;margin:0 auto}
.breadcrumb a{color:#2a3a9e;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* --- 列表页 --- */
body.page-list .container{padding:28px 20px 40px}
body.page-list .section-head{margin-bottom:20px;flex-wrap:wrap;gap:12px}
body.page-list .comic-grid{grid-template-columns:repeat(6,1fr);gap:16px}
.list-intro{font-size:14px;color:#666;line-height:1.75;margin:0 0 20px;max-width:900px}

/* --- 关于页 --- */
body.page-about{line-height:1.75}
.wrap{max-width:800px;margin:32px auto;padding:28px 24px;background:#fff;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.06);border:1px solid #eee}
.wrap h1{margin:0 0 16px;font-size:1.35rem;font-weight:800;color:#111}
.wrap h2{font-size:1.05rem;margin:28px 0 12px;color:#222;border-left:4px solid var(--pink);padding-left:10px}
.wrap p{margin:0 0 14px;color:#555}
.contact{background:var(--pink-soft);padding:16px 18px;border-radius:12px;margin:12px 0;border:1px solid #ffd6e8}
.contact p{margin:0 0 10px}
.contact p:last-child{margin-bottom:0}
.wrap a{color:var(--pink);font-weight:600;text-decoration:none}
.wrap a:hover{text-decoration:underline}
body.page-about .site-footer{margin-top:40px}
.about-anchor-section h3{font-size:1rem;font-weight:700;margin:18px 0 8px;color:#333;border:none;padding:0}
.about-anchor-section h2 + h3{margin-top:12px}

body.page-detail .site-footer{margin-top:48px}

/* 列表页栅格覆盖首页的 8 列漫画网格 */
@media(max-width:1199px){
  body.page-list .comic-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:991px){
  body.page-list .comic-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  body.page-list .comic-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- 详情页 content.html --- */
body.page-detail {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #fff;
}
.page-detail .hdr-bar {
  background: #111;
  color: #fff;
  padding: 15px 40px;
}
.page-detail .detail-wrap {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}
.page-detail .detail-wrap img,
.page-detail .content-demo-img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: block;
}
.page-detail .relate {
  margin-top: 24px;
  line-height: 2;
}
.page-detail .relate a {
  margin-right: 10px;
  color: #555;
  text-decoration: none;
}