/*=========================================================
* Reset
*=========================================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f3f5f9;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

body.is-home {
  background: #f3f5f9 url("/baidu/templates/moban/img/index_page_bg.webp") center top no-repeat;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #1677ff;
}

ul, ol {
  list-style: none;
}

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

/*=========================================================
* Container
*=========================================================*/
.container {
  width: 1200px;
  margin: auto;
}

/*=========================================================
* Header
*=========================================================*/
.header {
  background: #2f8be6;
  margin-bottom: 10px;
}

.header .container {
  height: 60px;
  display: flex;
  align-items: center;
}

.logo a {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.logo a img {
  height: 40px;
  width: auto;
}

.nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 45px;
}

.nav a {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.nav a:hover {
  color: #ffe082;
}

/*=========================================================
* Main & Layout
*=========================================================*/
main {
  margin-top: 20px;
}

.content {
  display: flex;
  gap: 20px;
}

.left {
  width: 860px;
}

.right {
  width: 320px;
}

/*=========================================================
* Card
*=========================================================*/
.card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  height: 50px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.card-title {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #409eff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  position: relative;
}

.card-title::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #409eff;
  border-right: 20px solid transparent;
}

.card-icon {
  margin-right: 8px;
  font-size: 16px;
}

.card-tabs {
  display: flex;
  align-items: center;
  gap: 45px;
  margin-left: 50px;
}

.card-tabs a {
  position: relative;
  color: #666;
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  transition: 0.2s;
}

.card-tabs a:hover {
  color: #409eff;
}

.card-tabs a.active {
  color: #409eff;
  font-weight: 600;
}

.card-tabs a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #409eff;
}

/*=========================================================
* Match Date（酷炫版）
*=========================================================*/
.match-date {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    background: linear-gradient(
        135deg,
        #409eff 0%,
        #60a5fa 50%,
        #38bdf8 100%
    );
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    box-shadow:
        0 2px 10px rgba(64,158,255,.18);
}

/* 流光 */
.match-date::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
    animation: dateShine 4s linear infinite;
}

@keyframes dateShine {
    from {left: -120%;}
    to {left: 150%;}
}

/* 左侧标识 */
.date-slash {
    width: 6px;
    height: 24px;
    background: #fff;
    border-radius: 3px;
    transform: skew(-20deg);
    margin-right: 12px;
    flex-shrink: 0;
}

/*=========================================================
* 平板
*=========================================================*/
@media (max-width: 992px) {
    .match-date {
        font-size: 18px;
        padding: 0 20px;
    }
}

/*=========================================================
* 手机
*=========================================================*/
@media (max-width: 768px) {
    .match-date {
        height: auto;
        min-height: 48px;
        padding: 12px 15px;
        font-size: 16px;
        line-height: 1.6;
        flex-wrap: wrap;
    }
    .date-slash {
        height: 20px;
        margin-right: 10px;
    }
}

/*=========================================================
* Match Row & Buttons
*=========================================================*/
.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
  transition: all .25s ease;
}

.match-row:hover {
  background: #f5f9ff;
  transform: translateY(-1px);
  box-shadow: inset 3px 0 0 #409eff;
}

.match-time {
  display:flex;
  align-items:center;
  gap:6px;
  color:inherit;
  text-decoration:none;
  transition: all .25s ease;
  transform-origin:center;
  cursor:pointer;
  width:100px;
  font-size:14px;
}

.match-time:hover{
  transform:scale(1.08);
  color:#2563eb;
}

.match-time .ball{
  transition:all .25s ease;
}

.match-time:hover .ball{
  transform:rotate(15deg);
}

.match-league {
  width: 150px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.match-league .league-name {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-team {
  width: 480px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.match-home,
.match-away {
  width: 210px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.match-home {
  justify-content: flex-start;
}

.match-away {
  justify-content: flex-end;
}

.match-home span,
.match-away span {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-vs {
  width: 20px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: #999;
}

.match-home img,
.match-away img,
.match-league img,
.match-logo-svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.match-btn{
  background: #409eff;
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.match-btn:hover{
  background:#5f94cc;
  cursor:pointer;
}

.match-hot{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ff3b30;
  color:#fff;
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  flex-shrink:0;
}

/*=========================================================
* 首页右侧资讯（恢复PC端原样式）
*=========================================================*/
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.news-image {
    flex-shrink: 0;
}

.news-item .news-image img {
    width:120px;
    height:80px;
    object-fit:cover;
    border-radius:4px;
    display:block;
}

.news-content {
    flex: 1;
    min-width: 0;
}

.news-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
    word-break: break-word;
    overflow-wrap: break-word;
}

.news-item:hover .news-title {
    color: #1677ff;
}

/*=========================================================
* News & Articles
*=========================================================*/
.news-detais-card {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.news-detais-card:hover .news-detais-title {
  color: #0066cc;
}

.news-detais-thumb {
  display: block;
  width: 240px;
  height: 135px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.news-detais-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.news-detais-card:hover .news-detais-thumb img {
  transform: scale(1.08);
}

.news-detais-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.news-detais-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-detais-summary {
  margin-top: 8px;
  font-size: 14px;
  color: #777;
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-detais-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.news-detais-tag {
  background: #f4f4f5;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #555;
}

.news-detais-date {
  font-size: 12px;
  color: #999;
}

/*=========================================================
* Pagination Responsive
*=========================================================*/

/* 平板 */
@media (max-width: 992px) {
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }
    .pagination a {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }
}

/* 手机 */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;
    }
    .pagination a {
        min-width: 34px;
        height: 34px;
        line-height: 34px;
        font-size: 13px;
        padding: 0 8px;
    }
}

/*=========================================================
* Article Detail
*=========================================================*/
.breadcrumb {
  color: #999;
  font-size: 13px;
  margin-bottom: 30px;
}

.breadcrumb a {
  color: #666;
}

.breadcrumb a:hover {
  color: #409eff;
}

.article-meta {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}

.article-page {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.prev-article,
.next-article {
  line-height: 2.2;
  margin-bottom: 10px;
}

.prev-article a,
.next-article a {
  color: #333;
}

.prev-article a:hover,
.next-article a:hover {
  color: #409eff;
}

/*=========================================================
* 文章正文大图专属样式
*=========================================================*/
.article-content img{
    max-width:100%;
    height:auto;
    display:block;
    margin:25px auto;
    border-radius:6px;
}

/*=========================================================
* Related
*=========================================================*/
.related {
  margin-top: 40px;
}

.related-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.related-list {
  margin-top: 15px;
}

.related-list a {
  display: block;
  height: 40px;
  line-height: 40px;
  color: #333;
  border-bottom: 1px dashed #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-list a:hover {
  color: #409eff;
}

.related-wrapper {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.related-item {
  margin-bottom: 10px;
}

.related-link {
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 14px;
}

.related-link:hover .related-title {
  color: #007bff;
}

.related-date {
  color: #999;
  font-size: 14px;
}

/*=========================================================
* Pagination
*=========================================================*/
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination a {
  min-width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #666;
  transition: all 0.2s ease;
}

.pagination a:hover {
  color: #409eff;
  border-color: #409eff;
}

.pagination .active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

/*=========================================================
* About & Friend Links & Article Wrap
*=========================================================*/
.about-wrap,
.article-wrap,
.list-wrap,
.page-wrap{
  background:#fff;
  padding:40px 60px;
  border-radius:6px;
  margin-top:20px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.about-title,
.page-title,
.list-title,
.article-title{
  font-size:32px;
  font-weight:700;
  text-align:center;
  margin-bottom:15px;
}

.friend-links{
  background:#fff;
  margin-top:10px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

.friend-links .container{
  height:48px;
  display:flex;
  align-items:center;
}

.friend-title{
  color:#409eff;
  margin-right:15px;
  font-weight:600;
}

.friend-links a{
  color:#666;
  margin-right:20px;
}

.friend-links a:hover{
  color:#409eff;
}

/*=========================================================
* Footer
*=========================================================*/
.footer{
  background:#2d2d2d;
  margin-top:30px;
  padding:25px 0;
}

.footer-line{
  height:1px;
  background: rgba(255,255,255,0.15);
  margin-bottom:20px;
}

.footer p,
.footer-copy{
  text-align:center;
  color:#999;
  font-size:13px;
  line-height:2;
}

.footer-nav a{
  color:#999;
  margin:0 10px;
}

.footer-nav a:hover{
  color:#409eff;
}

/*=========================================================
* Loading Spinner
*=========================================================*/
.loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px 20px;
}

.loading .spinner {
    width:42px;
    height:42px;
    border:3px solid #e5e7eb;
    border-top-color:#1677ff;
    border-radius:50%;
    animation:spin .8s linear infinite;
    margin-bottom:12px;
}

.loading span {
    font-size:14px;
    color:#666;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

/*=========================================================
* Responsive
*=========================================================*/
@media (max-width:1200px){
  .container{width:100%;padding:0 15px;}
  .content{flex-direction:column;align-items:center;}
  .left,.right{width:100%;margin:0 auto;}
  .nav{gap:15px;flex-wrap:wrap;}
}

/* 平板专用断点 */
@media (max-width:992px){
  .left,.right{width:100%;}
  .match-team{width:auto;}
  .news-detais-thumb{width:200px;height:112px;}
}

/* 移动端断点 */
@media (max-width:768px){
  .content{flex-direction:column;align-items:center;}
  .left,.right{width:100%;margin:0 auto;}
  .match-row{flex-direction:column;align-items:center;text-align:center;gap:10px;}
  .match-time,.match-league,.match-team{width:100%;justify-content:center;}
  .match-home,.match-away{width:auto;justify-content:center;}
  .match-team{gap:15px;}
  .match-btn{width:120px;}
  .news-item{flex-direction:column;align-items:center;}
  .news-item .news-image img{width:100%;max-width:300px;height:auto;}
  .article-wrap,.list-wrap,.page-wrap,.about-wrap{padding:20px;}
  .article-title,.list-title,.page-title,.about-title{font-size:28px;}
  .article-content{font-size:16px;line-height:1.8;}
  .header .container{flex-direction:column;height:auto;padding:10px 0;}
  .logo{margin-bottom:10px;}
  .nav{width:100%;justify-content:space-around;gap:0;}
  .nav a{font-size:16px;}
  .card-header{height:auto;flex-wrap:wrap;}
  .card-title{width:100%;}
  .card-title::after{display:none;}
  .card-tabs{width:100%;margin-left:0;justify-content:center;gap:20px;}

  /* 新闻列表移动端 */
  .news-detais-card{flex-direction:column;}
  .news-detais-thumb{width:100%;height:auto;}
  .news-detais-thumb img{width:100%;height:auto;}
  .news-detais-title{font-size:16px;}
  .news-detais-summary{-webkit-line-clamp:2;}
}