* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei",PingFangSC,Arial,sans-serif; color:#243230; background:#f2f5f3; }
a { color:#243230; text-decoration:none; }
.wrap { width:1120px; max-width:96%; margin:0 auto; }
.band { background:linear-gradient(135deg,#0f766e,#14b8a6); color:#fff; }
.band-top { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo { font-size:26px; font-weight:bold; color:#fff; letter-spacing:2px; }
.logo span { color:#fbbf24; }
.nav { display:flex; flex-wrap:wrap; gap:2px; }
.nav a { color:rgba(255,255,255,.92); padding:8px 13px; border-radius:20px; font-size:15px; }
.nav a:hover { background:rgba(255,255,255,.16); }
.nav a.on { background:rgba(255,255,255,.24); font-weight:bold; }
.band-hero { padding:26px 0 34px; }
.band-hero .kicker { font-size:13px; color:#a7f3d0; margin-bottom:10px; letter-spacing:2px; }
.band-hero h1 { font-size:30px; line-height:1.4; margin-bottom:12px; max-width:820px; }
.band-hero h1 a { color:#fff; }
.band-hero p { color:rgba(255,255,255,.85); font-size:15px; line-height:1.8; max-width:760px; margin-bottom:18px; }
.band-hero .btn { display:inline-block; background:#fbbf24; color:#7c4a03; font-weight:bold;
  padding:10px 26px; border-radius:24px; font-size:14px; }
.band-hero .btn:hover { background:#f59e0b; }
.band-slim { padding:20px 0 26px; }
.band-slim .crumb { color:rgba(255,255,255,.75); font-size:13px; margin-bottom:8px; }
.band-slim .crumb a { color:rgba(255,255,255,.75); }
.band-slim .crumb a:hover { color:#fff; }
.band-slim h1 { font-size:24px; }
.tiles { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; margin-top:-18px; }
.tile { display:block; border-radius:12px; padding:16px 8px 14px; text-align:center; color:#fff;
  box-shadow:0 4px 12px rgba(15,118,110,.18); transition:transform .15s; }
.tile:hover { transform:translateY(-3px); color:#fff; }
.tile b { display:block; font-size:15px; margin-bottom:4px; }
.tile i { font-style:normal; font-size:12px; color:rgba(255,255,255,.8); }
.cols { display:flex; gap:20px; margin-top:24px; align-items:flex-start; }
.maincol { flex:1; min-width:0; }
.side { width:320px; flex-shrink:0; }
.panel { background:#fff; border-radius:14px; padding:18px 20px; margin-bottom:20px; }
.panel-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.panel-h b { font-size:19px; color:#0f766e; }
.panel-h b:before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#fbbf24; margin-right:8px; vertical-align:2px; }
.panel-h a { font-size:13px; color:#94a3a0; }
.panel-h a:hover { color:#0f766e; }
.mrow { display:flex; gap:16px; padding:14px 0; border-bottom:1px solid #eef2f0; }
.mrow:last-child { border-bottom:none; }
.thumb { width:176px; height:112px; border-radius:10px; flex-shrink:0; position:relative; overflow:hidden; display:block; }
.thumb .tag { position:absolute; left:10px; top:10px; background:rgba(0,0,0,.28); color:#fff;
  padding:2px 9px; border-radius:12px; font-size:12px; }
.thumb .mk { position:absolute; right:4px; bottom:-10px; font-size:46px; font-weight:bold;
  color:rgba(255,255,255,.2); letter-spacing:-2px; }
.minfo { flex:1; min-width:0; display:flex; flex-direction:column; }
.minfo h3 { font-size:17px; line-height:1.5; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.minfo h3 a:hover { color:#0f766e; }
.minfo p { font-size:13px; color:#8b9793; line-height:1.7; margin-bottom:auto;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.minfo .meta { font-size:12px; color:#b3bdb9; margin-top:8px; }
.minfo .meta em { font-style:normal; color:#0f766e; }
.rank { list-style:none; }
.rank li { display:flex; align-items:baseline; gap:10px; padding:7px 0; font-size:14px; }
.rank li b { width:22px; height:22px; line-height:22px; border-radius:7px; background:#e5efe9;
  color:#7d8d87; text-align:center; font-size:12px; flex-shrink:0; }
.rank li:nth-child(-n+3) b { background:#fbbf24; color:#7c4a03; }
.rank li a { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rank li a:hover { color:#0f766e; }
.quick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick a { background:#f0f6f3; border-radius:8px; padding:9px 12px; font-size:13px; color:#3b4a46; text-align:center; }
.quick a:hover { background:#0f766e; color:#fff; }
.pager { text-align:center; padding:20px 0 4px; }
.pager a, .pager b { display:inline-block; min-width:34px; padding:7px 10px; border-radius:18px; margin:0 3px;
  background:#fff; font-size:14px; color:#4b5563; }
.pager b { background:#0f766e; color:#fff; }
.pager a:hover { color:#0f766e; }
.article { background:#fff; border-radius:14px; padding:30px 36px; }
.article h1 { font-size:26px; line-height:1.45; margin-bottom:12px; color:#1a2b28; }
.article .meta { color:#9aa8a3; font-size:13px; padding-bottom:14px; border-bottom:1px solid #eef2f0; margin-bottom:18px; }
.article .meta span { margin-right:16px; }
.article h2 { font-size:19px; margin:22px 0 10px; color:#0f766e; }
.article h2:before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#fbbf24; margin-right:9px; vertical-align:1px; }
.article p { font-size:16px; line-height:1.95; margin-bottom:14px; color:#37474f; }
.pn { display:flex; gap:14px; margin-top:20px; }
.pn a, .pn span { flex:1; background:#fff; border-radius:10px; padding:13px 16px; font-size:14px; color:#4b5563;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.pn a:hover { color:#0f766e; }
.adbox { margin:20px 0; text-align:center; overflow:hidden; }
.article .adbox { margin:16px 0; }
.footer { background:#123b36; color:#9db8b2; margin-top:40px; padding:26px 0; font-size:13px; text-align:center; line-height:2.1; }
.footer a { color:#9db8b2; }
.footer a:hover { color:#fff; }
@media (max-width:980px){
  .tiles { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cols { flex-direction:column; }
  .side { width:100%; }
  .thumb { width:120px; height:84px; }
  .band-top { flex-direction:column; gap:8px; }
  .band-hero h1 { font-size:22px; }
  .article { padding:22px 18px; }
}