/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Segoe UI',sans-serif;font-size:15px;line-height:1.7;color:#1a1a1a;background:#f3f4f6}
a{color:inherit;text-decoration:none}
a:hover{color:#c0392b}
img{max-width:100%;height:auto;display:block;object-fit:cover}
ul,ol{list-style:none}
input,button{font-family:inherit}

/* ===== CSS Variables ===== */
:root{
  --red:#c0392b;
  --red-dark:#a93226;
  --red-light:#e74c3c;
  --gold:#f39c12;
  --bg:#f3f4f6;
  --bg-white:#fff;
  --text:#1a1a1a;
  --text-muted:#777;
  --border:#e5e7eb;
  --aside-w:300px;
  --gap:28px;
  --radius:10px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-hover:0 6px 24px rgba(192,57,43,.15);
}

/* ===== Layout ===== */
.container{max-width:1220px;margin:0 auto;padding:0 20px}
.layout-two-col{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w);gap:var(--gap);align-items:start}
.col-main{min-width:0}
.col-aside{min-width:0}

/* ===== Site Header ===== */
.site-header{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07);position:sticky;top:0;z-index:1000}
.header-inner{max-width:1220px;margin:0 auto;padding:0 20px}
.header-top-bar{display:flex;align-items:center;gap:16px;height:64px}
.site-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{font-size:26px;line-height:1}
.logo-text{font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,var(--red),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}
.header-search{flex:1;max-width:380px;display:flex;border:2px solid var(--red);border-radius:28px;overflow:hidden;margin-left:auto}
.header-search input{flex:1;min-width:0;padding:7px 14px;border:none;outline:none;font-size:.93rem;background:#fff;color:var(--text)}
.header-search button{padding:7px 14px;background:var(--red);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;transition:background .2s}
.header-search button:hover{background:var(--red-dark)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:8px;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--red);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 0 8px}
.site-nav a{padding:5px 12px;border-radius:20px;font-size:.9rem;font-weight:600;color:var(--text);transition:background .2s,color .2s;white-space:nowrap}
.site-nav a:hover,.site-nav a.active{background:var(--red);color:#fff}
.site-nav .nav-home{color:var(--red)}

/* ===== Hero Banner ===== */
.home-hero{background:#fff;padding:24px 0;border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.hero-primary{min-width:0}
.hero-main-card{display:block;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero-main-img{width:100%;height:400px;object-fit:cover;display:block;transition:transform .4s}
.hero-main-card:hover .hero-main-img{transform:scale(1.03)}
.hero-main-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px 20px 20px;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 70%,transparent 100%)}
.hero-cat{display:inline-block;background:var(--red);color:#fff;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:4px;margin-bottom:8px}
.hero-main-title{color:#fff;font-size:1.35rem;font-weight:800;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;margin-bottom:6px}
.hero-main-intro{color:rgba(255,255,255,.8);font-size:.88rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.hero-secondary{min-width:0;background:#fff;border-radius:var(--radius);border:1px solid var(--border)}
.hero-sec-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.flame-icon{font-size:20px}
.sec-heading{font-size:1rem;font-weight:800;color:var(--red)}
.hero-sec-list{}
.hero-sec-item{border-bottom:1px solid var(--border)}
.hero-sec-item:last-child{border-bottom:none}
.hero-sec-link{display:flex;gap:10px;padding:12px 14px;align-items:center;transition:background .15s}
.hero-sec-link:hover{background:#fef5f5}
.hero-sec-link img{width:90px;height:68px;object-fit:cover;border-radius:6px;flex-shrink:0}
.hero-sec-info{min-width:0;flex:1}
.hero-sec-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:.88rem;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:5px}
.hero-sec-meta{font-size:.78rem;color:var(--text-muted)}

/* ===== Home Body ===== */
.home-body{padding:28px 0 40px}

/* ===== Section Heading ===== */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-title{font-size:1.1rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.title-bar{display:inline-block;width:4px;height:18px;background:linear-gradient(180deg,var(--red),var(--gold));border-radius:2px;flex-shrink:0}
.section-more{font-size:.84rem;color:var(--red);font-weight:600;white-space:nowrap}
.section-more:hover{text-decoration:underline}
.home-section{background:#fff;border-radius:var(--radius);padding:20px 20px 4px;margin-bottom:var(--gap);box-shadow:var(--shadow)}
.home-section--full{margin-top:0}

/* ===== Card List (latest) ===== */
.card-list{display:flex;flex-direction:column;gap:0}
.card-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.card-item:last-child{border-bottom:none}
.card-thumb-link{position:relative;flex-shrink:0;display:block;border-radius:8px;overflow:hidden;width:240px;height:160px}
.card-thumb-link img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card-item:hover .card-thumb-link img{transform:scale(1.05)}
.card-cat{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:4px}
.card-body{flex:1;min-width:0}
.card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:1rem;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:8px;display:block}
.card-title:hover{color:var(--red)}
.card-intro{font-size:.88rem;color:var(--text-muted);line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;margin-bottom:10px}
.card-meta{font-size:.8rem;color:var(--text-muted);display:flex;gap:14px;flex-wrap:wrap}
.card-views{color:var(--text-muted)}

/* ===== Thumb Grid (recommend) ===== */
.thumb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:16px}
.thumb-grid-item{}
.thumb-grid-link{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border);transition:box-shadow .2s}
.thumb-grid-link:hover{box-shadow:var(--shadow-hover)}
.thumb-grid-link img{width:100%;height:130px;object-fit:cover;display:block}
.thumb-grid-info{padding:8px 10px 10px}
.thumb-grid-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:.85rem;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:4px}
.thumb-grid-meta{font-size:.76rem;color:var(--text-muted)}

/* ===== Strip List (hot) ===== */
.strip-list{display:flex;flex-direction:column;gap:0}
.strip-item{border-bottom:1px solid var(--border)}
.strip-item:last-child{border-bottom:none}
.strip-link{display:flex;gap:16px;padding:14px 0;align-items:flex-start}
.strip-link img{width:200px;height:130px;object-fit:cover;border-radius:8px;flex-shrink:0;transition:transform .3s}
.strip-item:hover .strip-link img{transform:scale(1.03)}
.strip-info{flex:1;min-width:0}
.strip-cat{display:inline-block;font-size:.76rem;font-weight:700;color:var(--red);background:#fef2f2;border-radius:4px;padding:2px 8px;margin-bottom:6px}
.strip-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:.98rem;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:6px;display:block}
.strip-title:hover{color:var(--red)}
.strip-intro{font-size:.86rem;color:var(--text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;margin-bottom:6px}
.strip-meta{font-size:.8rem;color:var(--text-muted)}

/* ===== Aside ===== */
.aside-widget{background:#fff;border-radius:var(--radius);padding:18px 16px 8px;margin-bottom:var(--gap);box-shadow:var(--shadow)}
.aside-title{font-size:.98rem;font-weight:800;color:var(--text);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--red)}

/* Rank List */
.rank-list{counter-reset:rank}
.rank-item{counter-increment:rank;border-bottom:1px solid var(--border)}
.rank-item:last-child{border-bottom:none}
.rank-link{display:flex;align-items:center;gap:8px;padding:9px 2px;transition:background .15s}
.rank-link:hover .rank-text{color:var(--red)}
.rank-num{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.78rem;font-weight:800;flex-shrink:0;background:#f0f0f0;color:var(--text-muted)}
.rank-item:nth-child(1) .rank-num{background:var(--red);color:#fff}
.rank-item:nth-child(2) .rank-num{background:#e67e22;color:#fff}
.rank-item:nth-child(3) .rank-num{background:var(--gold);color:#fff}
.rank-num::before{content:counter(rank)}
.rank-text{flex:1;min-width:0;font-size:.87rem;font-weight:600;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.rank-views{font-size:.76rem;color:var(--text-muted);flex-shrink:0;white-space:nowrap}

/* Aside News */
.aside-news-list{padding-bottom:8px}
.aside-news-item{border-bottom:1px solid var(--border)}
.aside-news-item:last-child{border-bottom:none}
.aside-news-link{display:flex;gap:10px;padding:10px 0;align-items:center;transition:background .15s}
.aside-news-link:hover .aside-news-title{color:var(--red)}
.aside-news-link img{width:72px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0}
.aside-news-info{min-width:0;flex:1}
.aside-news-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:.85rem;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:4px}
.aside-news-date{font-size:.76rem;color:var(--text-muted)}

/* ===== Breadcrumb ===== */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.84rem;color:var(--text-muted);padding:16px 0 12px;overflow-wrap:anywhere;word-break:break-word}
.breadcrumb a{color:var(--text-muted);transition:color .2s}
.breadcrumb a:hover{color:var(--red)}
.bc-sep{margin:0 2px;color:#ccc}
.bc-cur{color:var(--text);font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;max-width:300px}

/* ===== List Page ===== */
.page-main{padding-bottom:40px;min-height:60vh}
.list-page-head{margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--red)}
.list-page-title{font-size:1.4rem;font-weight:900;color:var(--text)}
.article-list{display:flex;flex-direction:column;gap:0}
.article-item{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--border);align-items:flex-start;background:#fff;border-radius:0;transition:background .15s}
.article-item:first-child{padding-top:0}
.article-item:last-child{border-bottom:none}
.article-thumb-wrap{flex-shrink:0;display:block;width:260px;height:175px;border-radius:8px;overflow:hidden;position:relative}
.article-thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.article-item:hover .article-thumb-wrap img{transform:scale(1.04)}
.article-body{flex:1;min-width:0}
.article-cats{margin-bottom:6px}
.article-cat-badge{display:inline-block;font-size:.76rem;font-weight:700;color:#fff;background:var(--red);padding:2px 9px;border-radius:4px}
.article-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.45;margin-bottom:8px;display:block}
.article-title:hover{color:var(--red)}
.article-intro{font-size:.88rem;color:var(--text-muted);line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;margin-bottom:10px}
.article-meta{font-size:.8rem;color:var(--text-muted);display:flex;gap:14px;flex-wrap:wrap}

/* ===== Pagination ===== */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:24px 0 8px}
.pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:8px;border:1.5px solid var(--border);background:#fff;color:var(--text);font-size:.9rem;font-weight:600;transition:all .2s}
.pagination a:hover,.pagination a.active{background:var(--red);color:#fff;border-color:var(--red)}

/* ===== Article Detail ===== */
.article-detail{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);margin-bottom:var(--gap)}
.detail-title{font-size:1.6rem;font-weight:900;color:var(--text);line-height:1.4;margin-bottom:16px;overflow-wrap:anywhere;word-break:break-word}
.detail-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--text-muted);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);align-items:center}
.detail-views{color:var(--text-muted)}
.detail-cat{background:#fef2f2;color:var(--red);font-weight:700;padding:2px 10px;border-radius:4px;font-size:.82rem}
.detail-content{font-size:.97rem;line-height:1.85;color:#222;overflow-wrap:anywhere;word-break:break-word}
.detail-content h2,.detail-content h3{margin:24px 0 12px;line-height:1.4}
.detail-content p{margin-bottom:14px}
.detail-content img{max-width:100%;height:auto;border-radius:8px;margin:10px auto;display:block}
.detail-content a{color:var(--red);text-decoration:underline}
.detail-content ul,.detail-content ol{padding-left:22px;margin-bottom:14px}
.detail-content blockquote{border-left:4px solid var(--red);padding:10px 16px;background:#fef9f9;color:#555;margin:14px 0;border-radius:0 8px 8px 0;overflow-wrap:anywhere;word-break:break-word}
.detail-content pre,.detail-content code{max-width:100%;overflow-x:auto;background:#f4f4f4;padding:4px 8px;border-radius:4px;font-size:.88rem;overflow-wrap:anywhere;word-break:break-word}
.detail-content table{width:100%;border-collapse:collapse;margin-bottom:14px;overflow-x:auto;display:block}
.detail-content table th,.detail-content table td{border:1px solid var(--border);padding:8px 12px;text-align:left;white-space:nowrap}
.detail-content table th{background:#fef2f2}
.detail-content iframe{max-width:100%}

/* Related */
.related-section{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:var(--gap)}
.related-list{display:flex;flex-direction:column;gap:0}
.related-item{border-bottom:1px solid var(--border)}
.related-item:last-child{border-bottom:none}
.related-link{display:flex;gap:14px;padding:12px 0;align-items:center}
.related-link img{width:120px;height:88px;object-fit:cover;border-radius:7px;flex-shrink:0;transition:transform .3s}
.related-item:hover .related-link img{transform:scale(1.04)}
.related-info{flex:1;min-width:0}
.related-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:.92rem;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:6px;display:block}
.related-link:hover .related-title{color:var(--red)}
.related-meta{font-size:.78rem;color:var(--text-muted)}

/* ===== Search Page ===== */
.search-result-title{font-size:1.3rem;font-weight:800;color:var(--text);margin:8px 0 20px;overflow-wrap:anywhere;word-break:break-word}
.search-empty{text-align:center;padding:32px 0;color:var(--text-muted);display:none}
.article-list:empty + .search-empty{display:block}
.search-empty-form{display:flex;gap:8px;justify-content:center;margin-top:16px}
.search-empty-form input{padding:9px 16px;border:1.5px solid var(--border);border-radius:24px;outline:none;font-size:.94rem;width:240px}
.search-empty-form button{padding:9px 22px;border-radius:24px;background:var(--red);color:#fff;border:none;cursor:pointer;font-weight:600}

/* ===== About Page ===== */
.about-section{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.about-main-title{font-size:1.7rem;font-weight:900;color:var(--text);margin-bottom:18px}
.about-desc-block{font-size:.97rem;color:#444;line-height:1.85;margin-bottom:24px;padding:16px;background:#fef9f9;border-left:4px solid var(--red);border-radius:0 8px 8px 0;overflow-wrap:anywhere;word-break:break-word}
.about-brand{margin-bottom:24px}
.about-sub-title{font-size:1.1rem;font-weight:800;color:var(--red);margin-bottom:12px}
.about-brand p{margin-bottom:10px;font-size:.95rem;color:#444;line-height:1.8;overflow-wrap:anywhere;word-break:break-word}
.about-contact{}
.about-contact-list{font-size:.95rem;color:#444;line-height:2;list-style:none;padding:0}

/* ===== Footer ===== */
.site-footer{background:#1a1a2e;color:#bbb;padding:40px 0 0}
.footer-inner{max-width:1220px;margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:1fr 160px 220px;gap:40px;margin-bottom:32px}
.footer-brand{}
.footer-logo{font-size:1.3rem;font-weight:900;color:#fff;display:inline-block;margin-bottom:12px}
.footer-desc{font-size:.88rem;color:#999;line-height:1.7;overflow-wrap:anywhere;word-break:break-word}
.footer-col-title{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:14px}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:.88rem;color:#999;transition:color .2s}
.footer-links a:hover{color:var(--red)}
.footer-contact{list-style:none;padding:0}
.footer-contact li{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;color:#999;margin-bottom:10px;overflow-wrap:anywhere;word-break:break-word}
.footer-contact li svg{flex-shrink:0;margin-top:3px;opacity:.7}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#666}
.sitemap-link{color:#999;transition:color .2s}
.sitemap-link:hover{color:var(--red)}

/* ===== Responsive ===== */
@media(max-width:1024px){
  :root{--aside-w:260px;--gap:20px}
  .hero-inner{grid-template-columns:1fr 300px}
  .thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .layout-two-col{grid-template-columns:minmax(0,1fr)}
  .col-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}

@media(max-width:768px){
  .nav-toggle{display:flex}
  .header-search{max-width:200px}
  .site-nav{display:none;flex-direction:column;align-items:flex-start;gap:0;padding:8px 0 12px}
  .site-nav.is-open{display:flex}
  .site-nav a{width:100%;padding:10px 8px;border-radius:6px;font-size:.95rem}
  .hero-inner{grid-template-columns:1fr}
  .hero-main-img{height:260px}
  .hero-secondary{display:none}
  .card-thumb-link{width:160px;height:110px}
  .article-thumb-wrap{width:140px;height:100px}
  .thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr}
  .col-aside{grid-template-columns:1fr}
  .strip-link img{width:130px;height:90px}
}

@media(max-width:480px){
  .header-top-bar{height:56px;gap:10px}
  .logo-text{font-size:1.1rem}
  .header-search{max-width:140px}
  .card-item{flex-direction:column}
  .card-thumb-link{width:100%;height:200px}
  .article-item{flex-direction:column}
  .article-thumb-wrap{width:100%;height:180px}
  .thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip-link{flex-direction:column}
  .strip-link img{width:100%;height:160px}
  .detail-title{font-size:1.2rem}
  .about-main-title{font-size:1.3rem}
  .article-detail{padding:18px}
}

@media(max-width:375px){
  .header-search{max-width:110px}
  .thumb-grid{grid-template-columns:1fr}
  .container{padding:0 14px}
}