* {margin: 0; padding: 0;}
body {font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 14px; background: #fff; color: #333;}
body.articleview {background: #f9f9f9;}
a {text-decoration: none; color: #333;}
ul, li {list-style: none;}
.clear {clear: both; overflow: hidden;}

#header {background: #fff; border-bottom: 2px solid #e53935;}
.site {width: 1200px; margin: 0 auto;}
.site-bd {overflow: hidden; padding: 15px 0;}
.logo {float: left; margin-right: 30px;}
.logo a {display: block; font-size: 26px; font-weight: bold; color: #e53935; line-height: 36px;}
.nav {float: left; overflow: hidden;}
.nav ul {overflow: hidden;}
.nav li {float: left; margin-right: 5px; line-height: 36px;}
.nav li a {display: block; color: #333; padding: 0 15px; font-size: 15px; border-radius: 3px;}
.nav li a:hover {color: #fff; background: #e53935;}
.search {float: right; margin-top: 3px; margin-right: 15px;}
.search-form {overflow: hidden; border: 1px solid #ddd; border-radius: 3px;}
.search-word {float: left; width: 140px; height: 30px; border: 0; padding: 0 10px; outline: none; font-size: 13px;}
.search-btn {float: left; width: 50px; height: 30px; border: 0; background: #e53935; color: #fff; cursor: pointer; font-size: 13px;}
.search-btn:hover {background: #d32f2f;}
.nav-m {float: right; line-height: 36px;}
.nav-m a {display: block; padding: 0 15px; color: #fff; background: #e53935; border-radius: 3px; font-size: 14px;}
.nav-m a:hover {background: #d32f2f;}

.nav-lei {background: #f5f5f5; border-bottom: 1px solid #eee; padding: 8px 0;}
.nav-lei-inner {width: 1200px; margin: 0 auto;}
.nav-lei-inner dl {display: flex; flex-wrap: wrap; align-items: center;}
.nav-lei-inner dt {margin-right: 10px; line-height: 24px; font-weight: bold; color: #333; flex-shrink: 0;}
.nav-lei-inner dd {margin-right: 12px; line-height: 24px;}
.nav-lei-inner dd a {color: #666;}
.nav-lei-inner dd a:hover {color: #e53935;}

#toubu {display: none;}

.w1200 {width: 1200px; margin: 0 auto;}
.center {margin: 0 auto;}
.mt1 {margin-top: 10px;}

.place {padding: 10px 0; color: #666; font-size: 12px;}
.place a {color: #666;}
.place a:hover {color: #e53935;}

.pleft {float: left; width: 850px;}
.pright {float: right; width: 320px;}

.viewbox {background: #fff; border: 1px solid #eee; padding: 20px;}
.title {border-bottom: 2px solid #e53935; margin-bottom: 20px;}

/* ===== 节目表详情页 (detail_epg.php) 专用样式 ===== */
.epg-card {margin-bottom: 22px;}
.epg-card > h2 {font-size: 16px; color: #333; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #e53935;}
/* 频道信息头部 */
.epg-channel {display: flex; align-items: center; gap: 18px; padding: 16px; background: linear-gradient(135deg, #ffffff, #fafafa); border: 1px solid #eee; border-radius: 10px;}
.epg-channel img {width: 88px; height: 88px; object-fit: contain; border-radius: 8px; background: #f3f3f3; padding: 6px; flex: 0 0 auto;}
.epg-channel-info {flex: 1; min-width: 0;}
.epg-channel-info h1 {font-size: 22px; color: #222; margin: 0 0 6px; line-height: 1.3;}
.epg-channel-info p {margin: 0 0 12px; color: #999; font-size: 13px;}
.epg-live-btn {display: inline-flex; align-items: center; gap: 6px; background: #e53935; color: #fff; padding: 9px 20px; border-radius: 24px; font-size: 14px; text-decoration: none; font-weight: 600; transition: background .2s;}
.epg-live-btn:hover {background: #c62828; color: #fff;}
.epg-live-btn span {font-size: 12px;}
/* 今日节目单列表 */
.epg-list {list-style: none; margin: 0; padding: 0; border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden;}
.epg-list li {display: flex; align-items: center; padding: 11px 14px; border-left: 3px solid #e53935; border-bottom: 1px dashed #eee; background: #fff; transition: background .15s;}
.epg-list li:last-child {border-bottom: none;}
.epg-list li:nth-child(odd) {background: #fcfcfc;}
.epg-list li:hover {background: #fff5f5;}
.epg-time {flex: 0 0 82px; font-family: 'Courier New', monospace; font-weight: 700; color: #e53935; font-size: 15px;}
.epg-name {flex: 1; color: #444; font-size: 15px; padding-left: 12px; border-left: 1px solid #f0f0f0; line-height: 1.5;}
/* 频道介绍 */
.epg-intro {color: #555; line-height: 1.9; font-size: 15px; padding: 16px 18px; background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%); border-left: 4px solid #e53935; border-radius: 6px; text-indent: 2em;}
.epg-intro p {margin: 0 0 12px; text-indent: 2em;}
.epg-intro:empty::before {content: '暂无频道介绍'; color: #bbb; font-style: italic;}
/* EPG 页底部节目列表：4 列卡片网格（不影响其他页面 .tai 的横排样式） */
.tai-grid {overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; margin: 0 0 18px;}
.tai-grid li {width: auto; margin: 0; float: none; list-style: none;}
.tai-grid li a {display: block; padding: 12px 8px; text-align: center; background: #fff; border: 1px solid #eee; border-radius: 6px; color: #555; font-size: 13px; line-height: 1.4; transition: all .2s; position: relative;}
.tai-grid li a::before {content: '\1F4FA'; display: block; font-size: 18px; margin-bottom: 4px; opacity: .8;}
.tai-grid li a:hover {border-color: #e53935; color: #e53935; background: #fff5f5; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(229,57,53,.08);}
/* 移动端适配 */
@media (max-width: 480px) {
  .epg-channel {flex-wrap: wrap; gap: 12px; padding: 14px;}
  .epg-channel img {width: 64px; height: 64px;}
  .epg-channel-info h1 {font-size: 18px;}
  .epg-time {flex: 0 0 64px; font-size: 14px;}
  .epg-name {font-size: 14px;}
}
.title h1 {font-size: 20px; color: #333; padding-bottom: 10px;}

.ding {margin-top: 20px; margin-bottom: 15px; border-bottom: 2px solid #e53935; padding-bottom: 8px; overflow: hidden;}
.ding h2 {font-size: 16px; color: #333; float: left;}
.ding strong {font-size: 16px; color: #333; display: block;}
.ding strong a {color: #333;}
.ding .more {float: right; font-size: 12px; color: #999; font-weight: normal;}

.tai {overflow: hidden;}
.tai li {float: left; width: 150px; margin-right: 20px; line-height: 28px;}
.tai li a {color: #666;}
.tai li a:hover {color: #e53935;}

.content {line-height: 1.8; color: #666; overflow: hidden; margin-top: 15px; margin-bottom: 20px;}
.content img {max-width: 100%; height: auto; margin-bottom: 15px;}
.zhibo {float: left; width: 150px; height: 150px; margin-right: 20px; margin-bottom: 10px; border: 1px solid #ddd; overflow: hidden;}
.zhibo img {width: 100%; height: 100%; object-fit: contain;}

.ad {margin-bottom: 20px;}

.listclass {overflow: hidden; padding: 10px 0; border-bottom: 1px dashed #ddd; line-height: 28px;}
.listclass span {float: left; color: #666;}
.listclass span.more {float: right; overflow: hidden;}
.listclass span.more a {color: #e53935; margin-left: 15px;}
.listclass span.more a:hover {text-decoration: underline;}

.show {overflow: hidden; display: flex; flex-wrap: wrap; gap: 8px;}
.show li {width: 96px; margin-bottom: 8px; text-align: center; list-style: none;}
.preview {display: block; width: 96px; height: 72px; overflow: hidden; border-radius: 4px; background: #f8f8f8;}
.preview img {width: 100%; height: 100%; display: block; object-fit: contain;}
.show li img {width: 100%; height: 100%; display: block; object-fit: contain;}
.show li span {display: block; margin-top: 5px; font-size: 12px; font-family: 'Microsoft YaHei', Arial, sans-serif;}
.show li span a {color: #444; text-decoration: none;}
.show li span a:hover {color: #e53935;}

/* 右侧栏热门电视台三列适配：pright 320px - viewbox padding 20px 后只剩 280px，
   默认 96px×3 + 8px×2 = 304px 放不下，会折成两列。针对右侧栏单独收紧。 */
.pright .viewbox {padding: 10px;}
.pright .show {gap: 6px;}
.pright .show li {width: 92px;}
.pright .preview {width: 92px; height: 69px;}

/* 节目表详情页右侧频道导航 */
.epg-side-title {display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; padding: 0 2px 10px; border-bottom: 1px solid #ececec;}
.epg-side-title strong {display: flex; align-items: center; gap: 9px; font-size: 17px; line-height: 28px; color: #222;}
.epg-side-title em {font-size: 11px; line-height: 22px; padding: 0 8px; color: #999; background: #f5f5f5; border-radius: 11px; font-style: normal; font-weight: normal;}
.epg-side-mark {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; background: linear-gradient(135deg, #f4514b, #d92828); border-radius: 8px; font-size: 14px; box-shadow: 0 4px 10px rgba(229,57,53,.18);}
.epg-side-mark-tv {background: linear-gradient(135deg, #ff8a45, #f4513b);}
.pright .epg-side-list {margin: 0; padding: 5px; overflow: hidden; background: #fff; border: 1px solid #ededed; border-radius: 10px; box-shadow: 0 4px 16px rgba(30,40,60,.05);}
.pright .epg-side-list-scroll {max-height: 466px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8d8d8 transparent;}
.pright .epg-side-list-scroll::-webkit-scrollbar {width: 5px;}
.pright .epg-side-list-scroll::-webkit-scrollbar-track {background: transparent;}
.pright .epg-side-list-scroll::-webkit-scrollbar-thumb {background: #d8d8d8; border-radius: 5px;}
.pright .epg-side-list li {position: relative; margin: 0; padding: 0; border-bottom: 1px solid #f2f2f2;}
.pright .epg-side-list li:last-child {border-bottom: 0;}
.pright .epg-side-list li a {display: flex; align-items: center; min-width: 0; padding: 10px 28px 10px 28px; color: #444; font-size: 14px; line-height: 20px; border-radius: 7px; transition: color .18s, background .18s, transform .18s;}
.pright .epg-side-list li a::before {content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #e1e1e1; border-radius: 50%; transition: background .18s, box-shadow .18s;}
.pright .epg-side-list li a::after {content: '›'; position: absolute; right: 11px; top: 50%; margin-top: -10px; color: #c5c5c5; font-size: 18px; line-height: 20px; transition: color .18s, transform .18s;}
.pright .epg-side-list li a span {flex: 0 0 auto; margin-left: 4px; color: #aaa; font-size: 12px;}
.pright .epg-side-list li a:hover {color: #d82f2f; background: #fff5f4; transform: translateX(2px);}
.pright .epg-side-list li a:hover::before {background: #e53935; box-shadow: 0 0 0 3px rgba(229,57,53,.12);}
.pright .epg-side-list li a:hover::after {color: #e53935; transform: translateX(2px);}
.pright .epg-side-list li a:hover span {color: #e26a66;}

.footer {background: #f5f5f5; padding: 20px 0; margin-top: 20px; text-align: center; border-top: 1px solid #eee;}
.footer .powered {color: #999; font-size: 12px; margin-bottom: 5px;}

.watch-card {width: 850px; height: 500px; background: linear-gradient(135deg, #2a2a2a, #161616); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; font-family: 'Microsoft YaHei', Arial, sans-serif;}
.ad-pc {display: inline-block; max-width: 100%; height: auto;}
.ad-mobile {display: none; max-width: 100%; height: auto;}

@media (max-width: 1024px) {
  .site, .nav-lei-inner, .w1200 {width: 100%; padding: 0 10px; box-sizing: border-box;}
  .pleft {width: 100%; float: none;}
  .pright {width: 100%; float: none; margin-top: 20px;}
  .pright .epg-side-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px;}
  .pright .epg-side-list-scroll {max-height: 380px;}
  .pright .epg-side-list li:nth-last-child(-n+2) {border-bottom: 0;}
  .watch-card {width: 100%; height: 380px;}
  .viewbox {padding: 10px;}
  .site-bd {padding: 10px 0;}
}

@media (max-width: 768px) {
  body {font-size: 13px;}
  .pright .epg-side-list {grid-template-columns: 1fr;}
  .pright .epg-side-list li:nth-last-child(2) {border-bottom: 1px solid #f2f2f2;}
  .pright .epg-side-list-scroll {max-height: 420px;}
  .epg-side-title strong {font-size: 16px;}
  .logo a {font-size: 22px;}
  .nav {display: none;}
  .nav-lei {padding: 6px 0;display:none;}
  .nav-lei-inner dl {display: flex; flex-wrap: wrap;}
  .nav-lei-inner dt {font-size: 13px; margin-right: 8px;}
  .nav-lei-inner dd {width: 23%; margin-right: 2%; line-height: 26px;}
  .search-word {width: 100px;}
  .search-btn {width: 45px;}
  .watch-card {height: 320px;}
  .watch-card a {padding: 12px 36px; font-size: 15px;}
  .watch-card > div:nth-child(1) {font-size: 22px;}
  .watch-card > div:nth-child(2) {font-size: 12px;}
  .zhibo {width: 120px;}
  .zhibo img {width: 120px; height: 120px;}
  .tai li {width: 31%; margin-right: 3.5%; margin-bottom: 8px;}
  .tai li:nth-child(3n) {margin-right: 0;}
  .show {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
  .show li, .pright .show li {width: 100%; margin: 0;}
  .preview, .pright .preview {width: 100%; height: 80px; border-radius: 6px; background: #f8f8f8;}
  .preview img, .show li img, .pright .preview img, .pright .show li img {width: 100%; height: 80px; object-fit: contain;}
  .ad-pc {display: none;}
  .ad-mobile {display: inline-block;}
}

@media (max-width: 480px) {
  body {font-size: 12px;}
  .logo a {font-size: 20px;}
  .nav-m a {padding: 0 10px; font-size: 13px;}
  .search {margin-right: 10px;}
  .search-word {width: 80px; font-size: 12px;}
  .search-btn {width: 40px; font-size: 12px;}
  .watch-card {height: 260px;}
  .watch-card a {padding: 10px 28px; font-size: 14px;}
  .watch-card > div:nth-child(1) {font-size: 18px;}
  .watch-card > div:nth-child(2) {font-size: 11px; margin-bottom: 20px;}
  .watch-card > div:nth-child(4) {font-size: 11px; margin-top: 15px;}
  .viewbox {padding: 10px;}
  .zhibo {width: 100px; margin-right: 15px;}
  .zhibo img {width: 100px; height: 100px;}
  .place {font-size: 11px; padding: 8px 0;}
  .ding h2 {font-size: 14px;}
  .tai li {width: 31%; margin-right: 3.5%;}
  .tai li:nth-child(3n) {margin-right: 0;}
  .show {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
  .show li, .pright .show li {width: 100%; margin: 0;}
  .preview, .pright .preview {width: 100%; height: 90px; border-radius: 6px; background: #f8f8f8;}
  .preview img, .show li img, .pright .preview img, .pright .show li img {width: 100%; height: 90px; object-fit: contain;}
  .footer {padding: 15px 0;}
  .nav-lei-inner dt {font-size: 12px; margin-right: 5px;}
  .nav-lei-inner dd {width: 31%; margin-right: 2%; line-height: 24px;}
}