:root { --ink:#1e2533; --muted:#778092; --line:#e9edf3; --brand:#f04f3e; --brand-dark:#cb3428; --gold:#f1b63b; --paper:#fff; --bg:#f6f7fb; --shadow:0 12px 34px rgba(36,45,65,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei", "PingFang SC", Arial, sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.wrap { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.topline { background:#202633; color:#cbd1dc; font-size:13px; }
.topline .wrap { min-height:34px; display:flex; justify-content:space-between; align-items:center; }
.header { background:var(--paper); border-bottom:1px solid var(--line); }
.head-row { min-height:82px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; min-width:230px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg, #ff704f, #d83232); font-size:25px; box-shadow:0 8px 18px rgba(240,79,62,.25); }
.brand h1 { margin:0; font-size:inherit; font-weight:400; }
.brand strong { display:block; font-size:19px; letter-spacing:.5px; }
.brand small { display:block; color:var(--muted); font-size:11px; }
.nav { display:flex; gap:6px; flex:1; align-items:center; }
.nav a { padding:10px 12px; border-radius:10px; color:#525b6d; font-size:14px; white-space:nowrap; }
.nav a:hover, .nav a.active { background:#fff0ed; color:var(--brand-dark); }
.search { width:190px; display:flex; align-items:center; gap:7px; padding:8px 11px; background:#f6f7fa; border:1px solid var(--line); border-radius:22px; color:var(--muted); font-size:13px; }
.hero { padding:28px 0 4px; }
.hero-box { position:relative; min-height:320px; overflow:hidden; border-radius:24px; background:linear-gradient(115deg,#2c3445,#713d3a); color:#fff; box-shadow:var(--shadow); }
.hero-slide { display:none; min-height:320px; padding:44px 48% 42px 48px; background-size:cover; background-position:center; }
.hero-slide.active { display:block; animation:fade .5s ease; }
.hero-slide:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,29,42,.88),rgba(24,29,42,.18)); pointer-events:none; }
.hero-slide > * { position:relative; z-index:1; }
.hero-kicker { color:#ffcf7b; font-size:13px; letter-spacing:2px; }
.hero h2 { margin:10px 0 13px; font-size:32px; line-height:1.3; }
.hero p { margin:0; color:#e8ebf1; font-size:15px; }
.dots { position:absolute; z-index:3; bottom:22px; left:48px; display:flex; gap:8px; }
.dot { width:8px; height:8px; border:0; border-radius:50%; background:#aeb4c1; cursor:pointer; }
.dot.active { width:26px; border-radius:8px; background:#ffbd62; }
.section { padding:30px 0 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:16px; }
.section-head h2 { margin:0; font-size:23px; }
.section-head p { margin:0; color:var(--muted); font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.card { overflow:hidden; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 5px 20px rgba(36,45,65,.04); }
.thumb { height:158px; background:#eceff4; }
.card-body { padding:15px 16px 17px; }
.tag { display:inline-block; color:var(--brand-dark); background:#fff0ed; padding:2px 8px; border-radius:6px; font-size:11px; }
.card h3 { margin:9px 0 7px; font-size:16px; line-height:1.45; }
.card p { height:48px; overflow:hidden; margin:0; color:var(--muted); font-size:13px; }
.meta { display:flex; justify-content:space-between; color:#9aa1ae; font-size:11px; margin-top:12px; }
.split { display:grid; grid-template-columns:1.4fr .9fr; gap:20px; }
.list-panel, .about, .subscribe { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; }
.list-item { display:grid; grid-template-columns:70px 1fr 72px; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:0; }
.rank-no { color:var(--brand); font-size:20px; font-weight:700; }
.list-item h3 { margin:0 0 3px; font-size:15px; }
.list-item p { margin:0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item time { color:#a0a7b3; font-size:11px; text-align:right; }
.about h2, .subscribe h2 { margin:0 0 10px; font-size:20px; }
.about p { margin:0; color:#667083; font-size:14px; }
.notice { margin-top:18px; padding:14px 16px; border-left:4px solid var(--gold); background:#fff9eb; color:#765b28; border-radius:8px; font-size:13px; }
.subscribe { display:flex; align-items:center; justify-content:space-between; gap:22px; background:linear-gradient(120deg,#fff2ed,#fffaf2); }
.subscribe p { margin:0; color:#6f7685; font-size:13px; }
.qr { flex:none; width:96px; height:96px; display:grid; place-items:center; border:7px solid #fff; outline:1px solid #efc8bc; background:repeating-linear-gradient(45deg,#2c3445 0 5px,#fff 5px 10px); color:#fff; font-size:10px; text-align:center; }
.btn { display:inline-block; margin-top:13px; padding:9px 18px; border-radius:9px; background:var(--brand); color:#fff; font-size:13px; }
.btn:hover { background:var(--brand-dark); }
.footer { margin-top:34px; padding:28px 0; background:#202633; color:#aeb7c6; font-size:12px; }
.footer .wrap { display:flex; justify-content:space-between; gap:15px; }
.breadcrumb { padding:22px 0 12px; color:#8992a1; font-size:13px; }
.article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:22px; }
.article { background:var(--paper); padding:30px 36px 38px; border:1px solid var(--line); border-radius:18px; }
.article h1 { margin:0 0 12px; font-size:30px; line-height:1.35; }
.article-lead { color:#6b7484; border-bottom:1px solid var(--line); padding-bottom:18px; }
.article-meta { display:flex; flex-wrap:wrap; gap:15px; color:#8b94a3; font-size:12px; }
.article h2 { margin:27px 0 10px; font-size:21px; }
.article p { color:#505a6a; font-size:15px; }
.comic { margin:18px 0; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#edf0f4; }
.side-box { height:max-content; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; }
.side-box h2 { margin:0 0 10px; font-size:18px; }
.side-box a { display:block; padding:10px 0; border-bottom:1px solid var(--line); color:#697486; font-size:13px; }
.pager { display:flex; justify-content:space-between; gap:12px; margin-top:26px; }
.pager a { width:50%; padding:12px; border:1px solid var(--line); border-radius:10px; color:#687386; font-size:13px; }
@keyframes fade { from { opacity:.35; transform:translateX(8px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .head-row { flex-wrap:wrap; padding:14px 0; gap:11px; } .brand { min-width:auto; } .nav { order:3; width:100%; overflow:auto; } .search { margin-left:auto; } .grid { grid-template-columns:repeat(2,1fr); } .article-layout, .split { grid-template-columns:1fr; } }
@media (max-width:600px) { .wrap { width:min(100% - 22px, 540px); } .topline .wrap { min-height:30px; } .topline span:last-child { display:none; } .hero-box, .hero-slide { min-height:370px; } .hero-slide { padding:34px 24px 50px; } .hero h2 { font-size:26px; } .dots { left:24px; } .grid { grid-template-columns:1fr; } .thumb { height:190px; } .subscribe { align-items:flex-start; } .article { padding:23px 18px 28px; } .article h1 { font-size:25px; } .article p { font-size:14px; } .footer .wrap { flex-direction:column; } }