:root { --ink:#18212d; --muted:#667085; --banana:#ffd24d; --banana-deep:#e8ad13; --coral:#ff6b57; --paper:#fffdf7; --lav:#f0edff; --line:#e9e4d8; --shadow:0 14px 32px rgba(39,42,55,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:16px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; object-fit:cover; }
.wrap { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.site-head { position:sticky; top:0; z-index:10; background:rgba(255,253,247,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.head-inner { min-height:76px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:10px; flex:none; font-size:22px; font-weight:900; letter-spacing:-1px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:12px 12px 18px 12px; background:var(--banana); color:#4e342e; font-size:22px; transform:rotate(-5deg); }
.main-nav { display:flex; align-items:center; gap:5px; overflow-x:auto; scrollbar-width:none; }
.main-nav::-webkit-scrollbar { display:none; }
.main-nav a { display:flex; align-items:center; gap:5px; padding:9px 10px; border-radius:10px; white-space:nowrap; color:#4d5562; font-size:14px; font-weight:700; }
.main-nav a:hover,.main-nav a.active { background:#fff1b4; color:#6c4a00; }
.nav-icon { font-size:16px; }
.hero { margin-top:38px; padding:42px; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; overflow:hidden; border-radius:28px; background:linear-gradient(135deg,#28233e,#443a67 62%,#765c90); color:#fff; }
.eyebrow { margin:0 0 10px; color:#ffe48b; font-size:14px; font-weight:800; letter-spacing:1px; }
.hero h1 { display:inline-block; margin:0; color:#fff; font-size:clamp(38px,6vw,66px); line-height:1.1; }
.hero h1 span { border-bottom:7px solid var(--banana); }
.hero p { max-width:650px; margin:18px 0 0; color:#eae5fc; font-size:17px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 17px; border-radius:12px; background:var(--banana); color:#493400; font-weight:900; }
.button.ghost { background:#ffffff20; color:#fff; border:1px solid #ffffff44; }
.hero-art { min-height:250px; display:grid; place-items:center; border-radius:22px; background:radial-gradient(circle at 70% 22%,#ffe580 0 11%,transparent 12%),linear-gradient(145deg,#fc7f6a,#f5c657); }
.hero-art b { max-width:250px; transform:rotate(-8deg); color:#46345b; font-size:48px; line-height:1.05; font-family:serif; }
.section { margin-top:68px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px; }
.section-head h2 { margin:0; font-size:28px; line-height:1.25; }
.section-head p { margin:4px 0 0; color:var(--muted); }
.text-link { color:#a46000; font-weight:900; white-space:nowrap; }
.card-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.comic-card { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 5px 12px rgba(35,35,35,.04); transition:transform .2s; }
.comic-card:hover { transform:translateY(-4px); }
.cover { aspect-ratio:3/4; background:#eee; }
.comic-copy { padding:12px; }
.comic-copy h3 { overflow:hidden; margin:0; font-size:16px; line-height:1.4; white-space:nowrap; text-overflow:ellipsis; }
.comic-copy p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.update-strip { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }
.update-list { padding:6px 18px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.update-row { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:13px 0; border-bottom:1px dashed var(--line); }
.update-row:last-child { border:0; }
.update-no { color:var(--coral); font-weight:900; }
.update-meta { color:var(--muted); font-size:13px; }
.highlight { padding:25px; border-radius:20px; background:#fff2bd; }
.highlight h3 { margin:0; font-size:24px; }
.highlight p { margin:10px 0 17px; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.category { min-height:158px; padding:20px; border:1px solid #e1d9ff; border-radius:18px; background:var(--lav); }
.category:nth-child(2n) { background:#fff8df; border-color:#f5e2a1; }
.category i { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#fff; font-style:normal; font-size:20px; }
.category h3 { margin:12px 0 2px; }
.category p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.rank-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rank-item { display:flex; gap:14px; align-items:center; padding:13px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.rank-item strong { color:var(--coral); font-family:Georgia,serif; font-size:30px; }
.rank-item img { width:60px; height:76px; border-radius:10px; }
.rank-item h3 { margin:0; font-size:16px; line-height:1.4; }
.rank-item p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.feature { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:28px; border-radius:24px; background:#24334d; color:white; }
.feature img { aspect-ratio:16/9; border-radius:17px; }
.feature h2 { margin:0; font-size:31px; }
.feature p { color:#d9e1f5; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.tag { padding:8px 13px; border-radius:99px; background:#fff; border:1px solid var(--line); color:#535d6b; font-size:14px; font-weight:700; }
.reader-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.note { padding:22px; border-left:4px solid var(--banana-deep); border-radius:0 16px 16px 0; background:#fff; }
.note h3 { margin:0; font-size:18px; }
.note p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.about { display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; }
.about-title { padding:30px; border-radius:24px; background:#ffe47d; }
.about-title h2 { margin:0; font-size:34px; line-height:1.2; }
.about-copy { padding:6px 0; color:#424b58; }
.app-box { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:28px; border:2px solid var(--ink); border-radius:24px; background:#fff; }
.app-box h2 { margin:0; font-size:28px; }
.app-box p { margin:8px 0 18px; color:var(--muted); }
.qr { display:grid; grid-template-columns:repeat(5,8px); gap:3px; padding:11px; border:7px solid var(--ink); background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0); }
.qr b { width:8px; height:8px; background:#fff; mix-blend-mode:screen; }
.crumb { margin:29px 0 0; color:var(--muted); font-size:14px; }
.crumb a { color:#8a5c00; }
.listing-hero { margin-top:25px; padding:30px; border-radius:22px; background:#fff0af; }
.listing-hero h1 { margin:0; font-size:36px; }
.listing-hero p { max-width:780px; margin:8px 0 0; color:#5d5a50; }
.article { width:min(840px,100%); margin:28px auto 0; }
.article-head { padding:26px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.article h1 { margin:0; font-size:34px; line-height:1.25; }
.article-meta { margin:9px 0 0; color:var(--muted); font-size:14px; }
.read-guide { margin:20px 0; padding:15px 18px; border-radius:12px; background:#fff7da; color:#715818; }
.chapter-img { aspect-ratio:16/10; margin:16px 0; border-radius:15px; background:#eee; }
.chapter-end { padding:20px; border-radius:15px; text-align:center; background:var(--lav); }
.chapter-nav { display:flex; justify-content:space-between; gap:15px; margin-top:18px; }
.site-foot { margin-top:68px; padding:30px 0 38px; background:#1e2735; color:#e4e8ed; }
.foot-inner { display:flex; justify-content:space-between; gap:20px; }
.foot-inner p { margin:4px 0; color:#b6c0ca; font-size:14px; }
@media (max-width:900px) { .head-inner { gap:14px; } .hero,.feature,.about { grid-template-columns:1fr; } .card-grid { grid-template-columns:repeat(3,1fr); } .category-grid { grid-template-columns:repeat(2,1fr); } .rank-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .wrap { width:min(100% - 28px,1200px); } .head-inner { min-height:65px; } .brand { font-size:18px; } .brand-mark { width:31px; height:31px; } .main-nav a { padding:8px; font-size:13px; } .hero { margin-top:23px; padding:25px; } .hero-art { min-height:150px; } .hero-art b { font-size:34px; } .section { margin-top:48px; } .section-head { align-items:start; flex-direction:column; gap:6px; } .card-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .category-grid { grid-template-columns:1fr 1fr; gap:10px; } .category { min-height:145px; padding:15px; } .update-strip,.app-box { grid-template-columns:1fr; } .rank-list,.reader-notes { grid-template-columns:1fr; } .rank-item img { width:52px; height:68px; } .feature { padding:20px; } .app-box .qr { justify-self:start; } .foot-inner { display:block; } .chapter-nav { flex-direction:column; } }