/* ========================================
   法甲在线直播联赛回放网站 - 样式表
   Ligue 1 Live Streaming & Replay
   ======================================== */

/* CSS变量 - 法甲主题 */
:root {
  --primary: #091C3E;
  --primary-dark: #050E20;
  --primary-light: #1A3C7D;
  --secondary: #D4A843;
  --secondary-light: #E8C56D;
  --accent: #002395;
  --accent-red: #ED2939;
  --bg-dark: #070D1A;
  --bg-darker: #040810;
  --bg-card: #0E1A30;
  --bg-card-hover: #132240;
  --bg-sidebar: #0B1424;
  --text-primary: #F0F2F5;
  --text-secondary: #8B95A8;
  --text-muted: #5A6478;
  --border-color: #1A2A45;
  --border-light: #243456;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --transition: all 0.3s ease;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 全局重置 */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font-main);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color:var(--secondary); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--secondary-light); }

img { max-width:100%; height:auto; display:block; }

ul, ol { list-style:none; }

h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.3; }

/* 容器 */
.container { max-width:1260px; margin:0 auto; padding:0 20px; }

/* ========================================
   顶部信息栏
   ======================================== */
.top-bar {
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.top-bar-left { display:flex; align-items:center; gap:16px; }
.top-bar-left i { color:var(--secondary); margin-right:4px; }
.top-bar-right { display:flex; align-items:center; gap:12px; }
.top-bar-right a { color:var(--text-secondary); font-size:15px; }
.top-bar-right a:hover { color:var(--secondary); }

/* ========================================
   头部
   ======================================== */
.site-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: 3px solid var(--secondary);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow);
}
.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary-dark);
  font-weight: 900;
  box-shadow: 0 2px 10px rgba(212,168,67,0.3);
}
.logo-text h1 {
  font-size: 22px;
  color: #fff;
  letter-spacing: 1px;
}
.logo-text span {
  font-size: 11px;
  color: var(--secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 桌面导航 */
.desktop-nav { display:flex; align-items:center; gap:4px; }
.desktop-nav a {
  color: #ccc;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
}
.desktop-nav a:hover,
.desktop-nav a.active {
  color: #fff;
  background: rgba(212,168,67,0.15);
}
.desktop-nav a.active::after {
  content:'';
  position:absolute;
  bottom:0; left:50%; transform:translateX(-50%);
  width:20px; height:3px;
  background:var(--secondary);
  border-radius:2px;
}

/* 汉堡按钮 */
.hamburger-btn {
  display:none;
  min-width:44px;
  min-height:44px;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px;
  z-index:1100;
}
.hamburger-btn span {
  display:block;
  width:24px;
  height:2.5px;
  background:#fff;
  border-radius:2px;
  transition:var(--transition);
}

/* 移动端导航遮罩 */
.mobile-overlay {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7);
  z-index:1050;
  opacity:0;
  transition:opacity 0.3s ease;
}
.mobile-overlay.active { display:block; opacity:1; }

/* 移动端导航面板 */
.mobile-nav {
  display:none;
  position:fixed;
  top:0; right:-300px;
  width:280px;
  height:100vh !important;
  height:100dvh !important;
  background:#091C3E !important;
  z-index:1060;
  overflow-y:auto !important;
  transition:right 0.35s ease;
  padding:0 !important;
}
.mobile-nav.active {
  right:0 !important;
  display:block !important;
}
.mobile-nav-header {
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:16px 20px !important;
  border-bottom:1px solid #1A2A45 !important;
  background:#050E20 !important;
}
.mobile-nav-header span {
  color:#D4A843 !important;
  font-size:16px !important;
  font-weight:700 !important;
}
.mobile-close-btn {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:44px !important;
  min-height:44px !important;
  background:rgba(212,168,67,0.15) !important;
  border:none !important;
  color:#fff !important;
  font-size:14px !important;
  border-radius:8px !important;
  cursor:pointer !important;
  gap:6px !important;
  padding:8px 14px !important;
}
.mobile-close-btn i { font-size:16px !important; }
.mobile-nav-links {
  display:flex !important;
  flex-direction:column !important;
  padding:12px 0 !important;
}
.mobile-nav-links a {
  display:flex !important;
  align-items:center !important;
  padding:14px 20px !important;
  color:#ccc !important;
  font-size:15px !important;
  border-bottom:1px solid rgba(26,42,69,0.5) !important;
  transition:all 0.2s ease !important;
}
.mobile-nav-links a i {
  width:24px !important;
  text-align:center !important;
  margin-right:12px !important;
  color:#D4A843 !important;
  font-size:16px !important;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active {
  color:#fff !important;
  background:rgba(212,168,67,0.1) !important;
}

/* ========================================
   实时比分跑马灯
   ======================================== */
.live-ticker {
  background: linear-gradient(90deg, var(--accent-red), #c0202e);
  padding: 8px 0;
  overflow: hidden;
  position: relative;
}
.live-ticker::before {
  content:'LIVE';
  position:absolute;
  left:0; top:0; bottom:0;
  background:rgba(0,0,0,0.3);
  color:#fff;
  font-weight:900;
  font-size:11px;
  padding:0 14px;
  display:flex;
  align-items:center;
  letter-spacing:2px;
  z-index:2;
}
.ticker-wrap {
  margin-left:60px;
  overflow:hidden;
}
.ticker-content {
  display:flex;
  gap:40px;
  animation: tickerScroll 30s linear infinite;
  white-space:nowrap;
}
.ticker-item {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:13px;
}
.ticker-item .team { font-weight:600; }
.ticker-item .score { background:rgba(0,0,0,0.3); padding:2px 8px; border-radius:4px; font-weight:700; }
.ticker-item .time-badge { color:#FFD700; font-size:11px; }
@keyframes tickerScroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ========================================
   英雄横幅区
   ======================================== */
.hero-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #0A1530 100%);
  padding: 50px 0;
  position: relative;
  overflow: hidden;
}
.hero-banner::before {
  content:'';
  position:absolute;
  top:-50%; right:-20%;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(212,168,67,0.08) 0%, transparent 70%);
  border-radius:50%;
}
.hero-banner::after {
  content:'';
  position:absolute;
  bottom:-30%; left:-10%;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(0,35,149,0.1) 0%, transparent 70%);
  border-radius:50%;
}
.hero-content {
  position:relative;
  z-index:1;
  text-align:center;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(212,168,67,0.15);
  border:1px solid rgba(212,168,67,0.3);
  color:var(--secondary);
  padding:6px 18px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  margin-bottom:18px;
}
.hero-badge i { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.hero-title {
  font-size:40px;
  color:#fff;
  margin-bottom:12px;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.hero-title .highlight { color:var(--secondary); }
.hero-desc {
  font-size:16px;
  color:var(--text-secondary);
  max-width:600px;
  margin:0 auto 24px;
}
.hero-stats {
  display:flex;
  justify-content:center;
  gap:40px;
  margin-top:30px;
}
.hero-stat { text-align:center; }
.hero-stat .num {
  font-size:28px;
  font-weight:900;
  color:var(--secondary);
  display:block;
}
.hero-stat .label {
  font-size:12px;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ========================================
   双栏布局
   ======================================== */
.content-layout {
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:30px;
  padding:40px 0;
}
.content-main { min-width:0; }
.content-sidebar { min-width:0; }

/* ========================================
   区块标题
   ======================================== */
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:2px solid var(--border-color);
}
.section-title h2 {
  font-size:20px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}
.section-title h2 i {
  color:var(--secondary);
  font-size:18px;
}
.section-title .more-link {
  font-size:13px;
  color:var(--text-muted);
}
.section-title .more-link:hover { color:var(--secondary); }

/* ========================================
   赛程卡片
   ======================================== */
.match-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-bottom:36px;
}
.match-card {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:18px;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.match-card:hover {
  border-color:var(--secondary);
  background:var(--bg-card-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.match-card .league-tag {
  position:absolute;
  top:0; right:0;
  background:var(--secondary);
  color:var(--primary-dark);
  font-size:10px;
  font-weight:700;
  padding:3px 10px;
  border-radius:0 0 0 8px;
  text-transform:uppercase;
}
.match-card .match-time {
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:12px;
}
.match-card .match-time i { margin-right:4px; }
.match-teams {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.team-info {
  text-align:center;
  flex:1;
}
.team-logo {
  width:40px; height:40px;
  margin:0 auto 6px;
  background:rgba(255,255,255,0.05);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.team-name { font-size:13px; font-weight:600; color:#fff; }
.match-score {
  text-align:center;
  min-width:60px;
}
.match-score .score {
  font-size:22px;
  font-weight:900;
  color:var(--secondary);
  letter-spacing:4px;
}
.match-score .status {
  font-size:10px;
  color:var(--accent-red);
  font-weight:700;
  text-transform:uppercase;
  animation:pulse 1.5s infinite;
}
.match-card .match-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border-color);
  font-size:11px;
  color:var(--text-muted);
}
.match-card .watch-btn {
  background:linear-gradient(135deg, var(--secondary), var(--secondary-light));
  color:var(--primary-dark);
  border:none;
  padding:4px 12px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
}
.match-card .watch-btn:hover { transform:scale(1.05); }

/* ========================================
   文章卡片
   ======================================== */
.article-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-bottom:36px;
}
.article-card {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
}
.article-card:hover {
  border-color:var(--secondary);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.article-thumb {
  width:100%;
  height:180px;
  background:linear-gradient(135deg, var(--primary-light), var(--primary));
  position:relative;
  overflow:hidden;
}
.article-thumb .thumb-icon {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:40px;
  color:rgba(255,255,255,0.1);
}
.article-thumb .cat-tag {
  position:absolute;
  top:12px; left:12px;
  background:var(--secondary);
  color:var(--primary-dark);
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:4px;
}
.article-thumb .live-badge {
  position:absolute;
  top:12px; right:12px;
  background:var(--accent-red);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  display:flex;
  align-items:center;
  gap:4px;
}
.article-body {
  padding:16px;
}
.article-body h3 {
  font-size:16px;
  color:#fff;
  margin-bottom:8px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-body h3 a { color:#fff; }
.article-body h3 a:hover { color:var(--secondary); }
.article-meta {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.article-meta i { margin-right:3px; color:var(--text-muted); }
.article-excerpt {
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:12px;
}
.article-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.article-tags a {
  background:rgba(212,168,67,0.1);
  color:var(--secondary);
  padding:3px 10px;
  border-radius:4px;
  font-size:11px;
  border:1px solid rgba(212,168,67,0.15);
}
.article-tags a:hover {
  background:rgba(212,168,67,0.2);
}

/* 大图特色文章 */
.article-card.featured {
  grid-column:1/-1;
}
.article-card.featured .article-thumb { height:280px; }
.article-card.featured .article-body h3 { font-size:22px; }

/* ========================================
   侧栏组件
   ======================================== */
.sidebar-widget {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:24px;
}
.widget-title {
  font-size:16px;
  color:#fff;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:2px solid var(--secondary);
  display:flex;
  align-items:center;
  gap:8px;
}
.widget-title i { color:var(--secondary); font-size:14px; }

/* 积分榜 */
.standings-table { width:100%; border-collapse:collapse; }
.standings-table th {
  font-size:11px;
  color:var(--text-muted);
  text-transform:uppercase;
  padding:8px 6px;
  text-align:left;
  border-bottom:1px solid var(--border-color);
}
.standings-table td {
  font-size:13px;
  padding:8px 6px;
  border-bottom:1px solid rgba(26,42,69,0.3);
  color:var(--text-secondary);
}
.standings-table tr:hover td { color:#fff; background:rgba(212,168,67,0.03); }
.standings-table .rank { font-weight:700; color:var(--secondary); width:28px; }
.standings-table .team-col { color:#fff; font-weight:500; }
.standings-table .pts { font-weight:700; color:var(--secondary); }
.standings-table .top-zone td { background:rgba(0,146,70,0.05); }
.standings-table .relegation-zone td { background:rgba(237,41,57,0.05); }

/* 射手榜 */
.scorer-list { display:flex; flex-direction:column; gap:10px; }
.scorer-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(26,42,69,0.3);
}
.scorer-item:last-child { border-bottom:none; }
.scorer-rank {
  width:24px; height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  background:rgba(212,168,67,0.1);
  color:var(--secondary);
  flex-shrink:0;
}
.scorer-rank.gold { background:var(--secondary); color:var(--primary-dark); }
.scorer-rank.silver { background:#C0C0C0; color:#333; }
.scorer-rank.bronze { background:#CD7F32; color:#fff; }
.scorer-info { flex:1; }
.scorer-name { font-size:13px; font-weight:600; color:#fff; }
.scorer-team { font-size:11px; color:var(--text-muted); }
.scorer-goals {
  font-size:18px;
  font-weight:900;
  color:var(--secondary);
}

/* 标签云 */
.tag-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag-cloud a {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  padding:5px 14px;
  border-radius:20px;
  font-size:12px;
  transition:var(--transition);
}
.tag-cloud a:hover {
  background:rgba(212,168,67,0.1);
  border-color:var(--secondary);
  color:var(--secondary);
}

/* 热门文章 */
.popular-list { display:flex; flex-direction:column; gap:14px; }
.popular-item {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.popular-num {
  width:28px; height:28px;
  background:linear-gradient(135deg, var(--secondary), var(--secondary-light));
  color:var(--primary-dark);
  font-size:12px;
  font-weight:900;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.popular-text h4 {
  font-size:13px;
  color:#fff;
  line-height:1.5;
  margin-bottom:4px;
}
.popular-text h4 a { color:#fff; }
.popular-text h4 a:hover { color:var(--secondary); }
.popular-text .meta {
  font-size:11px;
  color:var(--text-muted);
}

/* ========================================
   列表页 - 筛选栏
   ======================================== */
.filter-bar {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
  padding:14px 18px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
}
.filter-bar label {
  font-size:13px;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:5px;
}
.filter-bar label i { color:var(--secondary); }
.filter-bar select {
  background:var(--bg-dark);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  padding:7px 14px;
  border-radius:var(--radius-sm);
  font-size:13px;
  cursor:pointer;
  outline:none;
}
.filter-bar select:focus { border-color:var(--secondary); }

/* 列表页 - 文章列表 */
.article-list { display:flex; flex-direction:column; gap:20px; margin-bottom:30px; }
.article-list-item {
  display:flex;
  gap:20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
}
.article-list-item:hover {
  border-color:var(--secondary);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.list-thumb {
  width:260px;
  min-height:180px;
  flex-shrink:0;
  background:linear-gradient(135deg, var(--primary-light), var(--primary));
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.list-thumb i { font-size:36px; color:rgba(255,255,255,0.1); }
.list-thumb .cat-tag {
  position:absolute;
  top:10px; left:10px;
  background:var(--secondary);
  color:var(--primary-dark);
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:4px;
}
.list-content {
  flex:1;
  padding:18px;
  display:flex;
  flex-direction:column;
}
.list-content h3 {
  font-size:18px;
  color:#fff;
  margin-bottom:8px;
  line-height:1.5;
}
.list-content h3 a { color:#fff; }
.list-content h3 a:hover { color:var(--secondary); }
.list-content .meta {
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:14px;
}
.list-content .meta i { margin-right:3px; }
.list-content .excerpt {
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.7;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:12px;
}
.list-content .tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.list-content .tags a {
  background:rgba(212,168,67,0.08);
  color:var(--secondary);
  padding:3px 10px;
  border-radius:4px;
  font-size:11px;
  border:1px solid rgba(212,168,67,0.12);
}
.list-content .tags a:hover { background:rgba(212,168,67,0.18); }

/* 分页 */
.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:20px 0;
}
.pagination a, .pagination span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  transition:var(--transition);
}
.pagination a:hover {
  border-color:var(--secondary);
  color:var(--secondary);
}
.pagination .current {
  background:var(--secondary);
  color:var(--primary-dark);
  font-weight:700;
  border-color:var(--secondary);
}
.pagination .dots { border:none; color:var(--text-muted); }

/* ========================================
   详情页
   ======================================== */
.detail-header {
  margin-bottom:24px;
}
.detail-breadcrumb {
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.detail-breadcrumb a { color:var(--text-secondary); }
.detail-breadcrumb a:hover { color:var(--secondary); }
.detail-breadcrumb i { font-size:10px; }

.detail-title {
  font-size:28px;
  color:#fff;
  line-height:1.4;
  margin-bottom:14px;
}
.detail-meta {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--text-muted);
  padding-bottom:16px;
  border-bottom:1px solid var(--border-color);
}
.detail-meta .item {
  display:flex;
  align-items:center;
  gap:5px;
}
.detail-meta .item i { color:var(--secondary); }

/* 详情正文 */
.detail-content {
  padding:24px 0;
  font-size:16px;
  line-height:1.9;
  color:var(--text-secondary);
}
.detail-content p { margin-bottom:18px; }
.detail-content h2 {
  font-size:22px;
  color:#fff;
  margin:30px 0 14px;
  padding-left:14px;
  border-left:4px solid var(--secondary);
}
.detail-content h3 {
  font-size:18px;
  color:#fff;
  margin:24px 0 12px;
}
.detail-content blockquote {
  border-left:4px solid var(--secondary);
  padding:16px 20px;
  margin:20px 0;
  background:rgba(212,168,67,0.05);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;
  color:var(--text-primary);
}
.detail-content ul {
  margin:14px 0;
  padding-left:20px;
}
.detail-content ul li {
  list-style:disc;
  margin-bottom:6px;
}
.detail-content .highlight-box {
  background:linear-gradient(135deg, rgba(212,168,67,0.08), rgba(0,35,149,0.08));
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:20px;
  margin:20px 0;
}
.detail-content .highlight-box h4 {
  color:var(--secondary);
  margin-bottom:10px;
  font-size:15px;
}

/* 视频播放区 */
.video-player {
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:24px 0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border-color);
}
.video-player .play-btn {
  width:70px; height:70px;
  background:rgba(212,168,67,0.9);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:var(--primary-dark);
  cursor:pointer;
  transition:var(--transition);
  z-index:1;
}
.video-player .play-btn:hover { transform:scale(1.1); background:var(--secondary); }
.video-player .video-label {
  position:absolute;
  bottom:14px; left:14px;
  background:var(--accent-red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:4px;
}

/* 标签与分享 */
.detail-tags-share {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  padding:18px 0;
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
}
.detail-tags { display:flex; flex-wrap:wrap; gap:8px; }
.detail-tags a {
  background:rgba(212,168,67,0.1);
  color:var(--secondary);
  padding:5px 14px;
  border-radius:4px;
  font-size:12px;
  border:1px solid rgba(212,168,67,0.15);
  display:flex;
  align-items:center;
  gap:4px;
}
.detail-tags a i { font-size:10px; }
.detail-tags a:hover { background:rgba(212,168,67,0.2); }
.detail-share {
  display:flex;
  align-items:center;
  gap:10px;
}
.detail-share span { font-size:12px; color:var(--text-muted); }
.share-btn {
  width:36px; height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  font-size:14px;
  color:#fff;
  transition:var(--transition);
}
.share-btn:hover { transform:scale(1.1); }
.share-btn.wechat { background:#07C160; }
.share-btn.weibo { background:#E6162D; }
.share-btn.qq { background:#12B7F5; }
.share-btn.link { background:var(--secondary); color:var(--primary-dark); }

/* 相关推荐 */
.related-articles {
  margin-top:36px;
}
.related-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.related-card {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
}
.related-card:hover {
  border-color:var(--secondary);
  transform:translateY(-2px);
}
.related-card .thumb {
  height:130px;
  background:linear-gradient(135deg, var(--primary-light), var(--primary));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.related-card .thumb i { font-size:28px; color:rgba(255,255,255,0.1); }
.related-card .info {
  padding:12px;
}
.related-card .info h4 {
  font-size:13px;
  color:#fff;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:6px;
}
.related-card .info h4 a { color:#fff; }
.related-card .info h4 a:hover { color:var(--secondary); }
.related-card .info .meta {
  font-size:11px;
  color:var(--text-muted);
}

/* ========================================
   页脚
   ======================================== */
.site-footer {
  background:var(--bg-darker);
  border-top:1px solid var(--border-color);
  padding:40px 0 0;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:30px;
  padding-bottom:30px;
  border-bottom:1px solid var(--border-color);
}
.footer-col h3 {
  font-size:15px;
  color:var(--secondary);
  margin-bottom:14px;
}
.footer-col p {
  font-size:13px;
  color:var(--text-muted);
  line-height:1.8;
}
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a {
  font-size:13px;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:6px;
}
.footer-col ul li a:hover { color:var(--secondary); }
.footer-col ul li a i { font-size:11px; width:16px; text-align:center; color:var(--text-muted); }
.footer-bottom {
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:var(--text-muted);
}
.footer-social { display:flex; gap:10px; }
.footer-social a {
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  font-size:14px;
  transition:var(--transition);
}
.footer-social a:hover { background:var(--secondary); color:var(--primary-dark); }

/* ========================================
   回到顶部
   ======================================== */
.back-to-top {
  position:fixed;
  bottom:30px;
  right:30px;
  width:44px;
  height:44px;
  background:var(--secondary);
  color:var(--primary-dark);
  border:none;
  border-radius:50%;
  font-size:18px;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  z-index:900;
  transition:var(--transition);
}
.back-to-top:hover { transform:translateY(-3px); }
.back-to-top.visible { display:flex; }

/* ========================================
   响应式 - 平板
   ======================================== */
@media(max-width:1024px) {
  .content-layout {
    grid-template-columns:1fr !important;
  }
  .content-sidebar { order:2; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}

/* ========================================
   响应式 - 手机
   ======================================== */
@media(max-width:768px) {
  .desktop-nav { display:none !important; }
  .hamburger-btn { display:flex !important; }

  .hero-title { font-size:26px; }
  .hero-stats { gap:20px; }
  .hero-stat .num { font-size:22px; }
  .hero-banner { padding:30px 0; }

  .match-grid { grid-template-columns:1fr !important; }
  .article-grid { grid-template-columns:1fr !important; }
  .article-card.featured .article-thumb { height:200px; }
  .article-card.featured .article-body h3 { font-size:18px; }

  .article-list-item { flex-direction:column !important; }
  .list-thumb { width:100% !important; min-height:160px !important; }

  .content-layout {
    grid-template-columns:1fr !important;
  }
  .content-sidebar { order:2; }

  .detail-title { font-size:22px; }
  .related-grid { grid-template-columns:1fr !important; }
  .detail-tags-share { flex-direction:column; }

  .filter-bar { flex-direction:column; align-items:flex-start; }

  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .pagination a, .pagination span { min-width:34px; height:34px; font-size:12px; }

  .top-bar .container { flex-direction:column; align-items:flex-start; }
}

@media(max-width:480px) {
  .hero-title { font-size:22px; }
  .hero-stats { flex-direction:column; gap:12px; }
  .container { padding:0 14px; }
}