*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --primary: #1d428a; --primary-dark: #15326b; --accent: #c8102e; --accent-light: #e31837;
    --bg: #f0f2f5; --card-bg: #ffffff; --text: #1a1a2e; --text-light: #5a5a6e;
    --border: #e4e6eb; --success: #28a745; --warning: #ffc107; --info: #17a2b8;
    --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
    --radius: 10px; --radius-sm: 6px;
}
html { scroll-behavior: smooth; }
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; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: all 0.2s; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link { position: absolute; top: -40px; left: 0; background: var(--primary); color: #fff; padding: 8px 16px; z-index: 10000; transition: top 0.3s; }
.skip-link:focus { top: 0; }

header[role="banner"] { background: var(--primary); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.header-top { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: #fff; }
.logo svg { width: 38px; height: 38px; }
.logo span { color: var(--accent); }
nav[role="navigation"] ul { display: flex; gap: 2px; }
nav[role="navigation"] a { color: rgba(255,255,255,0.85); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; transition: all 0.2s; white-space: nowrap; }
nav[role="navigation"] a:hover, nav[role="navigation"] a[aria-current="page"] { background: rgba(255,255,255,0.18); color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.search-box { position: relative; }
.search-box input { background: rgba(255,255,255,0.15); border: none; border-radius: 20px; padding: 8px 36px 8px 16px; color: #fff; width: 220px; font-size: 14px; outline: none; transition: all 0.3s; }
.search-box input::placeholder { color: rgba(255,255,255,0.55); }
.search-box input:focus { background: rgba(255,255,255,0.28); width: 280px; }
.search-box button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 16px; }
.menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
.sub-nav { background: var(--primary-dark); border-top: 1px solid rgba(255,255,255,0.08); }
.sub-nav ul { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub-nav a { color: rgba(255,255,255,0.65); font-size: 12px; padding: 10px 0; display: block; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; }
.sub-nav a:hover { color: #fff; border-bottom-color: var(--accent); }

main[role="main"] { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
.breadcrumb { max-width: 1200px; margin: 0 auto; padding: 12px 16px; font-size: 13px; color: var(--text-light); }
.breadcrumb a { color: var(--primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 8px; }
.structured-breadcrumb { display: none; }

.section { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border); }
.section-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.section-header h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.section-header h2::before { content: ''; display: inline-block; width: 4px; height: 20px; background: var(--accent); border-radius: 2px; }
.section-header .more-link { font-size: 14px; color: var(--primary); font-weight: 500; }
.section-header .more-link:hover { text-decoration: underline; }
.section-header .more-link.muted { font-size: 13px; color: var(--text-light); }

.sidebar-card { background: var(--card-bg); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.sidebar-card h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sidebar-card h2::before { content: ''; display: inline-block; width: 4px; height: 18px; background: var(--accent); border-radius: 2px; }

.news-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.news-list li:last-child { border-bottom: none; }
.news-list a { font-size: 14px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; transition: color 0.2s; }
.news-list a:hover { color: var(--primary); }
.news-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-weight: 500; }
.news-tag.nba { background: #e3f2fd; color: #1565c0; }
.news-tag.cba { background: #fce4ec; color: #c62828; }
.news-tag.football { background: #e8f5e9; color: #2e7d32; }
.news-tag.video { background: #fff3e0; color: #e65100; }
.news-title { flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-time { font-size: 12px; color: var(--text-light); white-space: nowrap; }

.channel-card { background: #f8f9fa; border-radius: var(--radius-sm); padding: 20px 14px; text-align: center; transition: all 0.25s; border: 1px solid var(--border); cursor: pointer; position: relative; }
.channel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.channel-card .channel-icon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; }
.channel-card .channel-name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.channel-card .channel-desc { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.channel-card .channel-status { font-size: 11px; padding: 3px 10px; border-radius: 10px; display: inline-block; font-weight: 500; }
.channel-link { position: absolute; inset: 0; z-index: 1; }
.channel-card > *:not(.channel-link) { position: relative; z-index: 2; pointer-events: none; }
.status-online { background: #e8f5e9; color: #2e7d32; }
.status-offline { background: #ffebee; color: #c62828; }
.status-maintain { background: #fff3e0; color: #e65100; }

.video-card { background: var(--card-bg); border-radius: var(--radius-sm); overflow: hidden; transition: all 0.25s; border: 1px solid var(--border); }
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: #1a1a2e; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); transition: background 0.2s; }
.video-card:hover .video-thumb .play-overlay { background: rgba(0,0,0,0.2); }
.play-btn { width: 48px; height: 48px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); transition: transform 0.2s; }
.video-card:hover .play-btn { transform: scale(1.1); }
.video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.video-info { padding: 12px; }
.video-info h3 { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; }
.video-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-light); }

.league-nba { color: #1d428a; }
.league-cba { color: #c8102e; }
.league-football { color: #28a745; }
.league-esports { color: #6f42c1; }
.league-tennis { color: #fd7e14; }

.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.quick-tags a { font-size: 13px; padding: 6px 14px; border-radius: 16px; background: #f0f2f5; color: var(--text); border: 1px solid var(--border); transition: all 0.2s; }
.quick-tags a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 20px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; transition: all 0.2s; }
.pagination a { background: #fff; color: var(--text); border: 1px solid var(--border); }
.pagination a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination span.current { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.pagination span.dots { color: var(--text-light); border: none; background: none; }
.pagination .prev, .pagination .next { padding: 0 14px; }
.pagination .disabled, .pagination [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

footer[role="contentinfo"] { background: #1a1a2e; color: rgba(255,255,255,0.65); padding: 40px 0 0; margin-top: 40px; }
.footer-content { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand .logo { margin-bottom: 14px; color: #fff; }
.footer-brand .logo svg { width: 36px; height: 36px; }
.footer-brand .logo span { color: var(--accent); }
.footer-brand p { font-size: 13px; line-height: 1.8; margin-bottom: 14px; color: rgba(255,255,255,0.55); }
.footer-section h3 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.footer-section ul li { margin-bottom: 9px; }
.footer-section a { font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.2s; }
.footer-section a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 36px; padding: 18px 16px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.4); }
.footer-bottom p { margin-bottom: 8px; }
.footer-bottom p:last-child { margin-bottom: 0; }
.footer-bottom a { color: rgba(255,255,255,0.4); margin: 0 10px; }
.footer-bottom a:hover { color: #fff; }

.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px; background: var(--primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; box-shadow: var(--shadow-hover); opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 999; }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-4px); }

.structured-breadcrumb { display: none; }

/* Channel icon background color classes */
.chan-cctv5 { background: #c8102e; }
.chan-cctv5plus { background: #1d428a; }
.chan-gd { background: #e31837; }
.chan-wx { background: #006bb6; }
.chan-btv { background: #003366; }
.chan-js { background: #1976d2; }
.chan-tx { background: #ff6a00; }
.chan-mg { background: #00a0e9; }
.chan-iqiyi { background: #00be06; }
.chan-yk { background: #1e88e5; }
.chan-pp { background: #00acc1; }
.chan-dy { background: #000; }
.chan-espn { background: #b81d25; }
.chan-sky { background: #002f6c; }
.chan-bein { background: #7b1fa2; }
.chan-fs { background: #003087; }
.chan-eleven { background: #1b5e20; }
.chan-eu { background: #ff6f00; }
.chan-nbc { background: #051c2c; }
.chan-tsn { background: #d32f2f; }
.chan-weilai { background: #6a1b9a; }
.chan-nw { background: #e53935; }
.chan-as { background: #ff5722; }
.chan-st { background: #d81b60; }

/* Cat icon background color classes */
.cat-bg-blue { background: #e3f2fd; }
.cat-bg-red { background: #fce4ec; }
.cat-bg-green { background: #e8f5e9; }
.cat-bg-orange { background: #fff3e0; }
.cat-bg-purple { background: #f3e5f5; }
.cat-bg-teal { background: #e0f2f1; }

/* Logo sizes */
.logo-svg { width: 38px; height: 38px; }
.logo-svg-sm { width: 36px; height: 36px; }

/* Margin top util */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

/* Text align center */
.text-center { text-align: center; }

/* Loading animation for player */
@keyframes nbaLoadBar { 0% { width: 0%; } 100% { width: 100%; } }

/* SI icon (source-item icon) background classes */
.si-bg-tx { background: #ff6a00; }
.si-bg-mg { background: #00a0e9; }
.si-bg-cctv5 { background: #c8102e; }
.si-bg-weilai { background: #6a1b9a; }
.si-bg-sky { background: #002f6c; }
.si-bg-bein { background: #7b1fa2; }
.si-bg-gray { background: #5a5a6e; }

/* Team logo gradient classes */
.team-gsw { background: linear-gradient(135deg,#1d428a,#FFC72C); color: #fff; }
.team-lal { background: linear-gradient(135deg,#552583,#FDB927); color: #fff; }
.team-red { background: linear-gradient(135deg,#C8102E,#8B0000); }

/* Utility: visually hidden */
.visually-hidden-text { position: absolute; left: -9999px; }

/* Utility: color white */
.text-white { color: #fff; }

/* Utility: text muted */
.text-muted { font-size: 13px; color: var(--text-light); }

/* Utility: text primary/accent colored */
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }

/* Utility: flex column */
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.pt-8 { padding-top: 8px; }
.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }

/* Common inline-styled tag pills */
.tag-pill-sm { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #f0f2f5; border: 1px solid var(--border); }
.tag-pill-blue { font-size: 12px; padding: 3px 10px; background: #e3f2fd; color: #1565c0; border-radius: 10px; }
.tag-pill-red { font-size: 12px; padding: 3px 10px; background: #fce4ec; color: #c62828; border-radius: 10px; }

/* Common inline-styled card item */
.card-item { padding: 10px; background: #f8f9fa; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.card-item-sm { padding: 12px; background: #f8f9fa; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Width percentage utilities */
.w-52 { width: 52%; }
.w-48 { width: 48%; }
.w-58 { width: 58%; }
.w-42 { width: 42%; }
.w-45 { width: 45%; }
.w-55 { width: 55%; }
.w-70 { width: 70%; }
.w-60 { width: 60%; }
.w-40 { width: 40%; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }

@media (max-width: 1024px) {
    .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    nav[role="navigation"] { position: absolute; top: 60px; left: 0; right: 0; background: var(--primary-dark); max-height: 0; overflow: hidden; transition: max-height 0.3s; }
    nav[role="navigation"].open { max-height: 500px; }
    nav[role="navigation"] ul { flex-direction: column; padding: 8px 16px; }
    .search-box input { width: 140px; }
    .search-box input:focus { width: 180px; }
    .footer-content { grid-template-columns: 1fr; gap: 24px; }
}