/* ===== 困困兔 - 汽车改装视频社区 全站样式 ===== */
/* 原创配色: 深夜蓝 #0d1b2a | 赛道橙 #f77f00 | 钛灰 #2b2d42 | 冰银 #edf2f4 | 荧光青 #00e5ff */

:root {
  --clr-dark: #0d1b2a;
  --clr-panel: #1b2838;
  --clr-accent: #f77f00;
  --clr-accent2: #00e5ff;
  --clr-text: #edf2f4;
  --clr-muted: #8d99ae;
  --clr-card: #162232;
  --clr-border: #2b3a4e;
  --clr-white: #ffffff;
  --clr-success: #06d6a0;
  --clr-danger: #ef476f;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,.35);
  --transition: .3s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

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

body {
  font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background: var(--clr-dark);
  color: var(--clr-text);
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: var(--clr-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--clr-accent2); }

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

.container { width:92%; max-width:1200px; margin:0 auto; }

/* ===== 头部导航 ===== */
.site-header {
  position: fixed; top:0; left:0; width:100%; z-index:999;
  background: rgba(13,27,42,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-border);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 4%;
}
.logo-wrap { display:flex; align-items:center; gap:10px; }
.logo-wrap img { width:42px; height:42px; border-radius:6px; }
.logo-wrap .brand-name { font-size:1.35rem; font-weight:700; color:var(--clr-accent); letter-spacing:1px; }

.main-nav { display:flex; gap:6px; }
.main-nav a {
  padding: 8px 14px; border-radius: 6px; font-size:.9rem; color:var(--clr-text);
  transition: background var(--transition), color var(--transition);
}
.main-nav a:hover, .main-nav a.active { background:var(--clr-accent); color:var(--clr-dark); }

.nav-toggle { display:none; background:none; border:none; color:var(--clr-text); font-size:1.5rem; cursor:pointer; }

/* ===== 搜索栏 ===== */
.search-bar {
  background: var(--clr-panel);
  padding: 12px 0;
  margin-top: 64px;
  border-bottom: 1px solid var(--clr-border);
}
.search-bar form {
  display:flex; gap:8px; max-width:600px; margin:0 auto;
}
.search-bar input {
  flex:1; padding:10px 16px; border-radius:var(--radius); border:1px solid var(--clr-border);
  background:var(--clr-dark); color:var(--clr-text); font-size:.95rem; outline:none;
}
.search-bar input:focus { border-color:var(--clr-accent); }
.search-bar button {
  padding:10px 24px; border:none; border-radius:var(--radius);
  background:var(--clr-accent); color:var(--clr-dark); font-weight:600; cursor:pointer;
  transition: background var(--transition);
}
.search-bar button:hover { background:var(--clr-accent2); }

/* ===== Hero Banner ===== */
.hero {
  position:relative; height:520px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: brightness(.55);
}
.hero-content { position:relative; z-index:2; padding:0 20px; }
.hero h1 { font-size:2.8rem; font-weight:800; margin-bottom:12px; text-shadow:0 2px 20px rgba(0,0,0,.6); }
.hero h1 .hl { color:var(--clr-accent); }
.hero p { font-size:1.15rem; color:var(--clr-muted); max-width:640px; margin:0 auto 24px; }
.hero .btn-group { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ===== 按钮 ===== */
.btn {
  display:inline-block; padding:12px 28px; border-radius:var(--radius);
  font-weight:600; font-size:.95rem; cursor:pointer; border:none;
  transition: all var(--transition);
}
.btn-primary { background:var(--clr-accent); color:var(--clr-dark); }
.btn-primary:hover { background:#e06f00; color:var(--clr-white); }
.btn-outline { border:2px solid var(--clr-accent2); color:var(--clr-accent2); background:transparent; }
.btn-outline:hover { background:var(--clr-accent2); color:var(--clr-dark); }

/* ===== 区块标题 ===== */
.section { padding:60px 0; }
.section-title {
  text-align:center; margin-bottom:40px;
}
.section-title h2 { font-size:1.9rem; font-weight:700; margin-bottom:8px; }
.section-title h2 .hl { color:var(--clr-accent); }
.section-title p { color:var(--clr-muted); font-size:1rem; }

/* ===== 视频卡片网格（H5 video实现） ===== */
.video-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px;
}
.video-card {
  background:var(--clr-card); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--clr-border); transition:transform var(--transition), box-shadow var(--transition);
}
.video-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.video-card .thumb {
  position:relative; padding-top:56.25%; overflow:hidden; cursor:pointer;
}
.video-card .thumb video,
.video-card .thumb img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform var(--transition);
}
.video-card:hover .thumb video,
.video-card:hover .thumb img { transform:scale(1.06); }
.video-card .play-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(247,127,0,.88); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--transition); z-index:3;
  pointer-events:none;
}
.video-card:hover .play-btn { opacity:1; }
.play-btn::after {
  content:''; display:block; width:0; height:0;
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  border-left:16px solid var(--clr-white); margin-left:3px;
}
.video-card .card-body { padding:16px; }
.video-card h3 { font-size:1rem; font-weight:600; margin-bottom:6px; line-height:1.4; }
.video-card .meta { display:flex; gap:14px; font-size:.8rem; color:var(--clr-muted); }
.video-card .meta span { display:flex; align-items:center; gap:4px; }
.video-card .tags { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.video-card .tags span {
  padding:2px 10px; border-radius:20px; font-size:.75rem;
  background:rgba(0,229,255,.12); color:var(--clr-accent2);
}
.video-card .video-author {
  margin-top:8px; font-size:.78rem; color:var(--clr-muted);
  padding-top:8px; border-top:1px solid var(--clr-border);
}

/* ===== 分类模块 ===== */
.cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
}
.cat-card {
  background:var(--clr-card); border-radius:var(--radius); padding:28px 22px;
  border:1px solid var(--clr-border); text-align:center;
  transition:border-color var(--transition), transform var(--transition);
}
.cat-card:hover { border-color:var(--clr-accent); transform:translateY(-4px); }
.cat-card .icon { font-size:2.4rem; margin-bottom:12px; }
.cat-card h3 { font-size:1.1rem; margin-bottom:6px; }
.cat-card p { font-size:.88rem; color:var(--clr-muted); }

/* ===== 专家展示 ===== */
.expert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.expert-card {
  background:var(--clr-card); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--clr-border); text-align:center;
  transition:transform var(--transition);
}
.expert-card:hover { transform:translateY(-4px); }
.expert-card .avatar { width:100%; height:260px; object-fit:cover; }
.expert-card .info { padding:20px; }
.expert-card h3 { font-size:1.1rem; margin-bottom:4px; }
.expert-card .role { color:var(--clr-accent); font-size:.88rem; margin-bottom:8px; }
.expert-card .credentials {
  font-size:.78rem; color:var(--clr-accent2); margin-bottom:10px;
  padding:6px 12px; background:rgba(0,229,255,.08); border-radius:6px;
  display:inline-block;
}
.expert-card p { font-size:.85rem; color:var(--clr-muted); margin-bottom:12px; }
.expert-card .btn { padding:8px 20px; font-size:.85rem; }

/* ===== AI赋能 ===== */
.ai-section { background:var(--clr-panel); }
.ai-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.ai-card {
  background:var(--clr-dark); border-radius:var(--radius); padding:24px;
  border:1px solid var(--clr-border);
  transition:border-color var(--transition);
}
.ai-card:hover { border-color:var(--clr-accent2); }
.ai-card h4 { color:var(--clr-accent2); margin-bottom:8px; font-size:1.05rem; }
.ai-card p { font-size:.88rem; color:var(--clr-muted); }

/* ===== EEAT 内容审核声明 ===== */
.eeat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
}
.eeat-card {
  background:var(--clr-card); border-radius:var(--radius); padding:24px;
  border:1px solid var(--clr-border);
  border-left:3px solid var(--clr-accent);
  transition:border-color var(--transition);
}
.eeat-card:hover { border-color:var(--clr-accent2); }
.eeat-card h4 { color:var(--clr-accent); margin-bottom:8px; font-size:1.05rem; }
.eeat-card p { font-size:.88rem; color:var(--clr-muted); line-height:1.7; }

/* ===== 合作品牌墙 ===== */
.partner-wall {
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:center;
}
.partner-wall .partner-item {
  width:140px; height:70px; background:var(--clr-card); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--clr-border); font-weight:600; color:var(--clr-muted);
  font-size:.9rem; transition:border-color var(--transition);
}
.partner-wall .partner-item:hover { border-color:var(--clr-accent); color:var(--clr-accent); }

/* ===== FAQ ===== */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
  background:var(--clr-card); border-radius:var(--radius); margin-bottom:12px;
  border:1px solid var(--clr-border); overflow:hidden;
}
.faq-q {
  padding:16px 20px; cursor:pointer; font-weight:600; font-size:.95rem;
  display:flex; justify-content:space-between; align-items:center;
  transition:background var(--transition);
}
.faq-q:hover { background:rgba(247,127,0,.08); }
.faq-q::after { content:'+'; font-size:1.3rem; color:var(--clr-accent); transition:transform var(--transition); }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { padding:0 20px; max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; }
.faq-item.open .faq-a { max-height:300px; padding:0 20px 16px; }
.faq-a p { font-size:.9rem; color:var(--clr-muted); line-height:1.7; }

/* ===== 用户评价 ===== */
.review-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.review-card {
  background:var(--clr-card); border-radius:var(--radius); padding:24px;
  border:1px solid var(--clr-border);
}
.review-card .stars { color:var(--clr-accent); margin-bottom:8px; font-size:1rem; }
.review-card blockquote { font-size:.9rem; color:var(--clr-muted); margin-bottom:12px; font-style:italic; line-height:1.6; }
.review-card .reviewer { font-size:.85rem; font-weight:600; }

/* ===== 联系我们 ===== */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.contact-card {
  background:var(--clr-card); border-radius:var(--radius); padding:24px;
  border:1px solid var(--clr-border); text-align:center;
}
.contact-card h4 { color:var(--clr-accent); margin-bottom:10px; }
.contact-card p { font-size:.88rem; color:var(--clr-muted); }

/* ===== How-To 指南 ===== */
.howto-steps { max-width:700px; margin:0 auto; }
.howto-step {
  display:flex; gap:16px; margin-bottom:24px; align-items:flex-start;
}
.howto-step .step-num {
  width:42px; height:42px; border-radius:50%; background:var(--clr-accent);
  color:var(--clr-dark); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.howto-step .step-content h4 { margin-bottom:4px; font-size:1rem; }
.howto-step .step-content p { font-size:.88rem; color:var(--clr-muted); }

/* ===== 社交分享 ===== */
.share-bar {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding:20px 0;
}
.share-btn {
  padding:10px 20px; border-radius:var(--radius); font-size:.88rem; font-weight:600;
  border:1px solid var(--clr-border); background:var(--clr-card); color:var(--clr-text);
  cursor:pointer; transition:all var(--transition);
}
.share-btn:hover { border-color:var(--clr-accent); color:var(--clr-accent); }

/* ===== 页脚 ===== */
.site-footer {
  background:var(--clr-panel); border-top:1px solid var(--clr-border);
  padding:40px 0 20px;
}
.footer-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:30px;
  margin-bottom:30px;
}
.footer-col h4 { color:var(--clr-accent); margin-bottom:12px; font-size:1rem; }
.footer-col p, .footer-col a { font-size:.88rem; color:var(--clr-muted); display:block; margin-bottom:6px; }
.footer-col a:hover { color:var(--clr-accent); }
.footer-col img.qr { width:120px; border-radius:8px; margin-top:8px; }
.footer-bottom {
  text-align:center; padding-top:20px; border-top:1px solid var(--clr-border);
  font-size:.82rem; color:var(--clr-muted);
}

/* ===== 面包屑 ===== */
.breadcrumb {
  padding:14px 0; font-size:.85rem; color:var(--clr-muted);
  margin-top:64px;
}
.breadcrumb a { color:var(--clr-accent); }
.breadcrumb span { margin:0 6px; }

/* ===== 内页布局 ===== */
.page-hero {
  padding:80px 0 40px; text-align:center;
  background: linear-gradient(135deg, var(--clr-panel) 0%, var(--clr-dark) 100%);
  margin-top:64px;
}
.page-hero h1 { font-size:2.2rem; font-weight:700; margin-bottom:8px; }
.page-hero h1 .hl { color:var(--clr-accent); }
.page-hero p { color:var(--clr-muted); }

/* ===== 干扰标签隐藏 ===== */
.jrtag { position:absolute; width:0; height:0; overflow:hidden; opacity:0; pointer-events:none; z-index:-9999; }

/* ===== 响应式 ===== */
@media(max-width:768px){
  .header-inner { flex-wrap:wrap; }
  .main-nav { display:none; flex-direction:column; width:100%; gap:2px; padding-top:10px; }
  .main-nav.open { display:flex; }
  .nav-toggle { display:block; }
  .hero { height:400px; }
  .hero h1 { font-size:1.8rem; }
  .video-grid { grid-template-columns:1fr; }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .expert-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .search-bar form { margin:0 4%; }
  .eeat-grid { grid-template-columns:1fr; }
}

@media(max-width:480px){
  .cat-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:1.5rem; }
  .eeat-grid { grid-template-columns:1fr; }
}

/* ===== 懒加载占位 ===== */
img[loading="lazy"] {
  opacity:0; transition:opacity .5s ease;
}
img[loading="lazy"].loaded, img[loading="lazy"][src] {
  opacity:1;
}