*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --red:#E4393C;
  --red-dark:#C62828;
  --red-light:#FF5252;
  --gold:#FF6B00;
  --silver:#FF8F3C;
  --bronze:#FFA76B;
  --yellow:#FFD700;
  --bg:#F5F6F7;
  --white:#FFF;
  --card:#FFF;
  --text:#1A1A1A;
  --text-2:#444;
  --text-3:#888;
  --text-4:#B0B0B0;
  --border:#EAEAEA;
  --hover:#FFF5F5;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --radius:10px;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* ===== Header ===== */
.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;
  box-shadow:0 1px 4px rgba(0,0,0,.04)}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;padding:0 20px;height:60px;gap:24px}
.logo-link{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-link img{width:36px;height:36px;border-radius:8px}
.logo-link .site-name{font-size:18px;font-weight:700;color:var(--red);white-space:nowrap}
.header-nav{display:flex;gap:6px;flex:1;overflow-x:auto}
.header-nav a{padding:6px 14px;border-radius:20px;font-size:14px;color:var(--text-2);transition:all .2s;white-space:nowrap}
.header-nav a:hover,.header-nav a.active{background:var(--red);color:#fff}
.header-meta{font-size:12px;color:var(--text-4);white-space:nowrap;flex-shrink:0}

/* ===== Layout ===== */
.page-wrap{max-width:1100px;margin:0 auto;padding:24px 20px 60px;display:flex;gap:24px}
.main-col{flex:1;min-width:0}
.side-col{width:280px;flex-shrink:0}

/* ===== Card ===== */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card+.card{margin-top:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.card-head .ch-icon{width:40px;height:40px;border-radius:10px;object-fit:cover;margin-right:12px}
.card-head .ch-info{flex:1}
.card-head .ch-title{font-size:17px;font-weight:700}
.card-head .ch-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.card-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid var(--border)}
.card-tabs a{display:block;padding:10px 16px;font-size:14px;color:var(--text-3);border-bottom:2px solid transparent;transition:all .2s}
.card-tabs a:hover{color:var(--text)}
.card-tabs a.active{color:var(--red);border-bottom-color:var(--red);font-weight:600}
.update-info{padding:8px 20px;font-size:12px;color:var(--text-4);background:#FAFAFA}

/* ===== Hot List ===== */
.hot-list{padding:0}
.hot-item{display:flex;align-items:center;padding:13px 20px;border-bottom:1px solid #F5F5F5;transition:background .15s;cursor:pointer;gap:14px}
.hot-item:last-child{border-bottom:none}
.hot-item:hover{background:var(--hover)}
.hot-rank{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;border-radius:6px;flex-shrink:0;color:var(--text-3)}
.hot-rank.top1{background:var(--gold);color:#fff}
.hot-rank.top2{background:var(--silver);color:#fff}
.hot-rank.top3{background:var(--bronze);color:#fff}
.hot-body{flex:1;min-width:0}
.hot-title{font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.hot-meta{font-size:12px;color:var(--text-3);margin-top:3px;display:flex;align-items:center;gap:8px}
.hot-meta .league-tag{background:#FFF0F0;color:var(--red);padding:1px 6px;border-radius:3px;font-size:11px}
.hot-meta .status-live{color:var(--red);font-weight:600}
.hot-meta .status-done{color:#52C41A}
.hot-meta .status-upcoming{color:var(--text-4)}
.hot-score{font-size:16px;font-weight:700;color:var(--red);white-space:nowrap;flex-shrink:0;min-width:56px;text-align:center}
.hot-score.no-score{color:var(--text-4);font-weight:400;font-size:13px}
.hot-heat{font-size:12px;color:var(--text-4);white-space:nowrap;flex-shrink:0;min-width:60px;text-align:right}
.hot-arrow{color:var(--border);font-size:14px;flex-shrink:0;margin-left:4px}

/* ===== Sidebar ===== */
.side-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.side-card+.side-card{margin-top:16px}
.side-card h3{font-size:15px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.side-links{display:flex;flex-direction:column;gap:4px}
.side-links a{font-size:13px;color:var(--text-2);padding:6px 10px;border-radius:6px;transition:all .15s;display:flex;align-items:center;gap:6px}
.side-links a:hover{background:var(--hover);color:var(--red)}
.side-links a .sl-dot{width:4px;height:4px;border-radius:50%;background:var(--text-4);flex-shrink:0}
.side-about p{font-size:13px;color:var(--text-3);line-height:1.7;margin-bottom:8px}
.side-about .domain{font-size:12px;color:var(--text-4);word-break:break-all}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:13px;color:var(--text-3);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:4px}
.breadcrumb a{color:var(--text-3);transition:color .15s}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb .sep{color:var(--text-4)}

/* ===== Footer ===== */
.site-footer{text-align:center;padding:32px 20px 24px;font-size:12px;color:var(--text-4);border-top:1px solid var(--border);background:var(--white)}
.site-footer a{color:var(--text-3)}
.site-footer a:hover{color:var(--red)}
.footer-links{display:flex;justify-content:center;gap:16px;margin-bottom:8px;flex-wrap:wrap}

/* ===== Archive List ===== */
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:16px 20px}
.archive-item{display:block;padding:14px 16px;border:1px solid var(--border);border-radius:8px;transition:all .2s}
.archive-item:hover{border-color:var(--red);box-shadow:0 2px 8px rgba(228,57,60,.1)}
.archive-item .ai-date{font-size:13px;color:var(--text-3)}
.archive-item .ai-title{font-size:15px;font-weight:600;margin-top:4px}
.archive-item .ai-count{font-size:12px;color:var(--text-4);margin-top:4px}

/* ===== Responsive ===== */
@media(max-width:860px){
  .page-wrap{flex-direction:column}
  .side-col{width:100%}
}
@media(max-width:600px){
  .header-inner{height:52px;padding:0 14px;gap:12px}
  .logo-link .site-name{font-size:15px}
  .header-nav a{padding:5px 10px;font-size:13px}
  .page-wrap{padding:14px 10px 40px}
  .hot-item{padding:11px 14px;gap:10px}
  .hot-title{font-size:14px}
  .hot-score{font-size:14px;min-width:48px}
  .hot-heat{display:none}
  .card-head{padding:12px 14px 10px}
}