/* ============================================
   双马尾 - 专业体育视频社区平台
   原创CSS样式表 | ca9lyh.cn
   设计理念：活力运动 + 现代视频社区
   主色调：深海军蓝 #0A1A2F + 活力橙 #FF6B35
   ============================================ */

/* ===== Reset & Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:#f5f7fa;
  color:#1a1a2e;
  line-height:1.7;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:#FF6B35}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* ===== CSS Variables ===== */
:root{
  --navy:#0A1A2F;
  --navy-light:#16243d;
  --orange:#FF6B35;
  --orange-light:#ff8555;
  --orange-dark:#e55a2b;
  --teal:#2EC4B6;
  --white:#fff;
  --gray-50:#f5f7fa;
  --gray-100:#eaeef3;
  --gray-200:#d8dee8;
  --gray-300:#b8c2d0;
  --gray-500:#6b7785;
  --gray-700:#3a4452;
  --gray-900:#1a1a2e;
  --radius:8px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(10,26,47,.08);
  --shadow-md:0 4px 12px rgba(10,26,47,.1);
  --shadow-lg:0 8px 30px rgba(10,26,47,.15);
  --transition:all .3s cubic-bezier(.23,1,.32,1);
}

/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:60px 0}
.section-title{
  font-size:1.75rem;font-weight:800;color:var(--navy);
  margin-bottom:8px;letter-spacing:-.5px;
}
.section-title .accent{color:var(--orange)}
.section-subtitle{
  font-size:.95rem;color:var(--gray-500);margin-bottom:32px;
}

/* ===== Header & Navigation ===== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,26,47,.98);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;max-width:1200px;margin:0 auto;padding:0 20px;
}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-icon{
  width:36px;height:36px;
  background:var(--orange);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-icon svg{width:22px;height:22px;fill:#fff}
.logo-text{
  font-size:1.3rem;font-weight:800;color:#fff;
  letter-spacing:1px;
}
.logo-text .sub{font-size:.7rem;font-weight:400;color:var(--gray-300);display:block;letter-spacing:0}

/* Nav */
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{
  color:rgba(255,255,255,.8);
  font-size:.9rem;font-weight:500;
  padding:8px 14px;border-radius:6px;
  transition:var(--transition);
}
.main-nav a:hover,.main-nav a.active{
  color:#fff;background:rgba(255,255,255,.1);
}
.main-nav a .nav-icon{display:inline-block;width:16px;height:16px;vertical-align:middle;margin-right:4px}

/* Mobile nav toggle */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  flex-direction:column;gap:5px;padding:8px;
}
.nav-toggle span{
  width:24px;height:2px;background:#fff;
  transition:var(--transition);border-radius:2px;
}

/* ===== Search Bar ===== */
.search-bar{
  background:rgba(255,255,255,.06);
  padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.search-form{
  max-width:600px;margin:0 auto;
  display:flex;gap:8px;
}
.search-input{
  flex:1;padding:10px 16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);
  color:#fff;font-size:.9rem;
  transition:var(--transition);
}
.search-input::placeholder{color:rgba(255,255,255,.5)}
.search-input:focus{
  outline:none;
  background:rgba(255,255,255,.15);
  border-color:var(--orange);
}
.search-btn{
  padding:10px 24px;
  background:var(--orange);
  border:none;border-radius:var(--radius);
  color:#fff;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:var(--transition);
}
.search-btn:hover{background:var(--orange-dark)}

/* ===== Hero Section ===== */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
  overflow:hidden;
  padding:80px 0 60px;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.25;
}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px}
.hero h1{
  font-size:2.5rem;font-weight:900;color:#fff;
  line-height:1.3;margin-bottom:16px;
  max-width:700px;
}
.hero h1 .highlight{color:var(--orange)}
.hero p{
  font-size:1.1rem;color:rgba(255,255,255,.8);
  max-width:600px;margin-bottom:32px;
}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.hero-tags span{
  padding:6px 16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  font-size:.85rem;color:rgba(255,255,255,.9);
}
.hero-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;
  background:var(--orange);
  border-radius:var(--radius);
  color:#fff;font-weight:700;font-size:1rem;
  transition:var(--transition);
}
.hero-cta:hover{
  background:var(--orange-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(255,107,53,.4);
  color:#fff;
}

/* ===== Video Card Grid ===== */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;
}
.video-card{
  background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  cursor:pointer;
}
.video-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.video-thumb{
  position:relative;aspect-ratio:16/9;
  background:var(--gray-100);overflow:hidden;
}
.video-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.video-card:hover .video-thumb img{transform:scale(1.08)}
.video-play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.8);
  width:56px;height:56px;
  background:rgba(255,107,53,.9);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:var(--transition);
  backdrop-filter:blur(4px);
}
.video-card:hover .video-play-btn{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
.video-play-btn svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.video-duration{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.75);
  color:#fff;font-size:.75rem;
  padding:2px 8px;border-radius:4px;
}
.video-info{padding:16px}
.video-title{
  font-size:1rem;font-weight:700;color:var(--navy);
  margin-bottom:8px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.video-meta{
  display:flex;align-items:center;gap:16px;
  font-size:.8rem;color:var(--gray-500);
}
.video-meta span{display:flex;align-items:center;gap:4px}
.video-badge{
  position:absolute;top:8px;left:8px;
  background:var(--orange);
  color:#fff;font-size:.7rem;font-weight:600;
  padding:3px 10px;border-radius:4px;
}

/* ===== Module Cards ===== */
.module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.module-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  border-top:3px solid transparent;
}
.module-card:hover{
  box-shadow:var(--shadow-md);
  border-top-color:var(--orange);
  transform:translateY(-2px);
}
.module-card h3{
  font-size:1.2rem;font-weight:700;color:var(--navy);
  margin-bottom:12px;
}
.module-card p{
  font-size:.9rem;color:var(--gray-500);line-height:1.7;
}
.module-card .module-icon{
  width:48px;height:48px;
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.module-card .module-icon svg{width:26px;height:26px;fill:#fff}

/* ===== Expert Cards ===== */
.expert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px;
}
.expert-card{
  background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.expert-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.expert-photo{
  aspect-ratio:3/4;overflow:hidden;background:var(--gray-100);
}
.expert-photo img{width:100%;height:100%;object-fit:cover}
.expert-info{padding:20px}
.expert-name{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.expert-role{font-size:.85rem;color:var(--orange);font-weight:600;margin-bottom:8px}
.expert-desc{font-size:.85rem;color:var(--gray-500);margin-bottom:12px;line-height:1.6}
.expert-actions{display:flex;gap:8px}
.expert-actions a{
  flex:1;text-align:center;padding:8px;
  border-radius:6px;font-size:.8rem;font-weight:600;
  transition:var(--transition);
}
.btn-contact{background:var(--navy);color:#fff}
.btn-contact:hover{background:var(--navy-light);color:#fff}
.btn-works{background:var(--gray-100);color:var(--navy)}
.btn-works:hover{background:var(--gray-200)}

/* ===== FAQ Section ===== */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{
  background:#fff;border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.faq-item:hover{box-shadow:var(--shadow-md)}
.faq-question{
  padding:18px 24px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-weight:600;color:var(--navy);font-size:.95rem;
}
.faq-question .faq-icon{
  width:24px;height:24px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
.faq-item.open .faq-question .faq-icon{transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;
  padding:0 24px;
}
.faq-item.open .faq-answer{max-height:300px;padding-bottom:18px}
.faq-answer p{font-size:.9rem;color:var(--gray-500);line-height:1.7}

/* ===== Reviews Section ===== */
.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px;
}
.review-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow-sm);
  transition:var(--transition);
  border-left:4px solid var(--orange);
}
.review-card:hover{box-shadow:var(--shadow-md)}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--teal));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1rem;flex-shrink:0;
}
.review-name{font-weight:700;color:var(--navy);font-size:.9rem}
.review-date{font-size:.75rem;color:var(--gray-300)}
.review-stars{color:var(--orange);font-size:.85rem;margin-bottom:8px}
.review-text{font-size:.85rem;color:var(--gray-700);line-height:1.7}

/* ===== Partner Logos ===== */
.partner-wall{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;
}
.partner-logo{
  width:120px;height:60px;
  background:#fff;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  font-weight:700;color:var(--navy);font-size:.85rem;
  transition:var(--transition);
}
.partner-logo:hover{box-shadow:var(--shadow-md);transform:scale(1.05)}

/* ===== Contact Section ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;gap:32px;
}
.contact-info{background:#fff;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.contact-info h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:20px}
.contact-item{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.contact-item .label{font-weight:600;color:var(--navy);font-size:.9rem;min-width:80px}
.contact-item .value{color:var(--gray-500);font-size:.9rem}
.contact-qr{display:flex;gap:24px;margin-top:20px}
.qr-item{text-align:center}
.qr-item img{width:120px;height:120px;border-radius:var(--radius);margin-bottom:8px}
.qr-item .label{font-size:.8rem;color:var(--gray-500)}

/* ===== Social Share ===== */
.share-bar{display:flex;gap:12px;flex-wrap:wrap}
.share-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius);
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:var(--transition);border:none;
}
.share-btn:hover{transform:translateY(-2px)}
.share-wechat{background:#07c160;color:#fff}
.share-weibo{background:#e6162d;color:#fff}
.share-douyin{background:#000;color:#fff}
.share-bilibili{background:#fb7299;color:#fff}

/* ===== Footer ===== */
.site-footer{
  background:var(--navy);
  color:rgba(255,255,255,.7);
  padding:48px 0 24px;
  margin-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px;margin-bottom:32px;
}
.footer-col h4{
  color:#fff;font-size:1rem;font-weight:700;
  margin-bottom:16px;
}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{
  color:rgba(255,255,255,.6);font-size:.85rem;
  transition:var(--transition);
}
.footer-col ul li a:hover{color:var(--orange)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:24px;text-align:center;
  font-size:.8rem;color:rgba(255,255,255,.5);
}
.footer-bottom .update-time{
  color:var(--orange);font-weight:600;
  margin-top:8px;display:block;
}

/* ===== Breadcrumb ===== */
.breadcrumb{
  padding:16px 0;font-size:.85rem;color:var(--gray-500);
}
.breadcrumb a{color:var(--gray-500)}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{margin:0 8px;color:var(--gray-300)}

/* ===== Page Header (Inner Pages) ===== */
.page-header{
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  padding:48px 0;
  position:relative;overflow:hidden;
}
.page-header-bg{
  position:absolute;inset:0;opacity:.2;
  background-size:cover;background-position:center;
}
.page-header-content{position:relative;z-index:2}
.page-header h1{
  font-size:2rem;font-weight:800;color:#fff;
  margin-bottom:8px;
}
.page-header p{
  color:rgba(255,255,255,.7);font-size:1rem;
  max-width:700px;
}

/* ===== Inner Page Content ===== */
.page-content{padding:48px 0}
.content-intro{
  background:#fff;border-radius:var(--radius-lg);
  padding:32px;margin-bottom:32px;
  box-shadow:var(--shadow-sm);
}
.content-intro p{
  font-size:.95rem;color:var(--gray-700);line-height:1.8;
  margin-bottom:12px;
}
.content-image{
  border-radius:var(--radius-lg);overflow:hidden;
  margin:24px 0;box-shadow:var(--shadow-md);
}
.content-image img{width:100%}

/* ===== Comment Section ===== */
.comment-section{
  background:#fff;border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-sm);
  margin-top:32px;
}
.comment-section h3{
  font-size:1.2rem;font-weight:700;color:var(--navy);
  margin-bottom:24px;
}
.comment-item{
  display:flex;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--gray-100);
}
.comment-item:last-child{border-bottom:none}
.comment-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--teal));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;
}
.comment-body{flex:1}
.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comment-name{font-weight:600;color:var(--navy);font-size:.85rem}
.comment-date{font-size:.75rem;color:var(--gray-300)}
.comment-text{font-size:.85rem;color:var(--gray-700);line-height:1.6}
.comment-reply{
  margin-top:8px;padding:12px 16px;
  background:var(--gray-50);border-radius:var(--radius);
  font-size:.8rem;color:var(--gray-500);
}
.comment-reply .reply-label{
  color:var(--orange);font-weight:600;margin-right:4px;
}

/* ===== Tags ===== */
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag-list span{
  padding:4px 12px;
  background:var(--gray-100);
  border-radius:4px;
  font-size:.8rem;color:var(--gray-700);
  transition:var(--transition);
}
.tag-list span:hover{background:var(--orange);color:#fff}

/* ===== How-To Guide ===== */
.howto-steps{counter-reset:step}
.howto-step{
  display:flex;gap:20px;margin-bottom:24px;
  position:relative;
}
.howto-step::before{
  counter-increment:step;content:counter(step);
  width:36px;height:36px;flex-shrink:0;
  background:var(--orange);color:#fff;
  border-radius:50%;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.howto-step-content h4{font-weight:700;color:var(--navy);margin-bottom:4px}
.howto-step-content p{font-size:.85rem;color:var(--gray-500)}

/* ===== Stats Bar ===== */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:32px;
  margin:32px 0;
}
.stat-item{text-align:center}
.stat-number{
  font-size:2rem;font-weight:900;color:var(--orange);
  line-height:1;
}
.stat-label{
  font-size:.8rem;color:rgba(255,255,255,.6);
  margin-top:4px;
}

/* ===== Responsive ===== */
@media(max-width:768px){
  .main-nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--navy);flex-direction:column;
    padding:16px;gap:0;border-top:1px solid rgba(255,255,255,.1);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 16px;width:100%}
  .nav-toggle{display:flex}
  .hero h1{font-size:1.8rem}
  .hero p{font-size:.95rem}
  .section-title{font-size:1.4rem}
  .contact-grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-bar{grid-template-columns:1fr 1fr}
  .page-header h1{font-size:1.5rem}
}

@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .stats-bar{grid-template-columns:1fr}
  .contact-qr{flex-direction:column;align-items:center}
}

/* ===== Utility ===== */
.text-center{text-align:center}
.mt-32{margin-top:32px}
.mb-32{margin-bottom:32px}
.lazy{opacity:0;transition:opacity .4s ease}
.lazy.loaded{opacity:1}