/* 番茄vlog视频 全站样式 (827837.cn) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --c-primary:#8e2de2;
  --c-secondary:#ff4ecd;
  --c-bg:#0f0a1f;
  --c-bg2:#1a1030;
  --c-card:rgba(255,255,255,0.04);
  --c-text:#f5f3ff;
  --c-muted:#bdb3d9;
  --c-line:rgba(255,255,255,0.08);
  --grad:linear-gradient(135deg,#8e2de2 0%,#ff4ecd 100%);
  --shadow:0 10px 30px rgba(142,45,226,0.25);
}
html,body{ background:var(--c-bg); color:var(--c-text); font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.7; font-size:15px; }
img{ max-width:100%; height:auto; display:block; }
a{ color:#fff; text-decoration:none; transition:.25s; }
a:hover{ color:var(--c-secondary); }
ul{ list-style:none; }
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* === Header === */
.site-header{ position:sticky; top:0; z-index:1000; background:rgba(15,10,31,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--c-line); }
.header-inner{ display:flex; align-items:center; gap:18px; padding:12px 16px; max-width:1200px; margin:0 auto; }
.brand-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo img{ width:42px; height:42px; border-radius:10px; }
.brand-logo .name{ font-weight:700; font-size:18px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-logo .name small{ display:block; font-size:11px; color:var(--c-muted); -webkit-text-fill-color:var(--c-muted); font-weight:400; margin-top:2px; }
.main-nav{ flex:1; }
.main-nav ul{ display:flex; gap:6px; flex-wrap:wrap; }
.main-nav a{ display:block; padding:8px 14px; border-radius:8px; font-size:14px; color:var(--c-text); }
.main-nav a:hover, .main-nav a.active{ background:var(--grad); color:#fff; }
.search-box{ position:relative; display:flex; align-items:center; }
.search-box input{ background:rgba(255,255,255,0.06); border:1px solid var(--c-line); border-radius:24px; padding:8px 38px 8px 16px; color:var(--c-text); font-size:13px; width:200px; outline:none; transition:.25s; }
.search-box input:focus{ border-color:var(--c-secondary); width:240px; }
.search-box button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:var(--grad); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.menu-toggle{ display:none; background:transparent; border:1px solid var(--c-line); color:#fff; padding:6px 10px; border-radius:6px; cursor:pointer; }

/* === Hero === */
.hero{ position:relative; padding:60px 0 70px; background:linear-gradient(180deg,#1a1030 0%,#0f0a1f 100%); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:url('../images/hero.jpg') center/cover no-repeat; opacity:.35; }
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-size:42px; line-height:1.25; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px; }
.hero .lead{ font-size:17px; color:var(--c-muted); max-width:760px; margin-bottom:22px; }
.hero .cta{ display:inline-flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 26px; border-radius:30px; font-weight:600; font-size:14px; transition:.25s; }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ transform:translateY(-2px); color:#fff; }
.btn-ghost{ border:1px solid rgba(255,255,255,0.2); color:#fff; }
.btn-ghost:hover{ border-color:var(--c-secondary); color:#fff; }

/* === Sections === */
section{ padding:60px 0; }
.section-title{ text-align:center; margin-bottom:36px; }
.section-title h2{ font-size:30px; margin-bottom:8px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.section-title p{ color:var(--c-muted); font-size:15px; }

/* === Video grid === */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-card{ position:relative; border-radius:14px; overflow:hidden; background:var(--c-card); border:1px solid var(--c-line); transition:.3s; }
.video-card:hover{ transform:translateY(-4px); border-color:var(--c-secondary); box-shadow:var(--shadow); }
.video-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.video-thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; loading:lazy; }
.video-card:hover .video-thumb img{ transform:scale(1.06); }
.play-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6); width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:.3s; pointer-events:none; }
.play-icon::after{ content:""; width:0; height:0; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px; }
.video-card:hover .play-icon{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.video-duration{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,0.7); color:#fff; padding:2px 8px; border-radius:4px; font-size:12px; }
.video-info{ padding:14px; }
.video-info h3{ font-size:15px; margin-bottom:8px; line-height:1.4; }
.video-info h3 a{ color:#fff; }
.video-info h3 a:hover{ color:var(--c-secondary); }
.video-meta{ display:flex; gap:14px; color:var(--c-muted); font-size:12px; }
.video-meta span{ display:inline-flex; align-items:center; gap:4px; }
.video-tags{ margin-top:8px; }
.video-tags .tag{ display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; background:rgba(142,45,226,.18); color:#d9b7ff; margin-right:6px; }

/* === Feature cards === */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature-card{ background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; overflow:hidden; transition:.3s; }
.feature-card:hover{ transform:translateY(-4px); border-color:var(--c-secondary); }
.feature-card img{ aspect-ratio:4/3; object-fit:cover; }
.feature-card .body{ padding:18px; }
.feature-card h3{ font-size:18px; margin-bottom:8px; }
.feature-card p{ color:var(--c-muted); font-size:14px; }
.feature-card .more{ margin-top:12px; display:inline-block; color:var(--c-secondary); font-size:13px; }

/* === Experts === */
.expert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.expert-card{ background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:22px 18px; text-align:center; transition:.3s; }
.expert-card:hover{ border-color:var(--c-secondary); transform:translateY(-4px); }
.expert-card img{ width:96px; height:96px; border-radius:50%; margin:0 auto 14px; border:3px solid var(--c-secondary); object-fit:cover; }
.expert-card h3{ font-size:17px; margin-bottom:4px; }
.expert-card .role{ color:var(--c-secondary); font-size:13px; margin-bottom:8px; }
.expert-card .bio{ color:var(--c-muted); font-size:13px; min-height:62px; }
.expert-card .actions{ margin-top:12px; display:flex; gap:8px; justify-content:center; }
.expert-card .actions a{ font-size:12px; padding:5px 12px; border-radius:14px; background:rgba(255,255,255,0.06); color:#fff; border:1px solid var(--c-line); }
.expert-card .actions a:hover{ background:var(--grad); border-color:transparent; }

/* === Brands wall === */
.brand-wall{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; }
.brand-wall .brand-logo-item{ background:rgba(255,255,255,0.95); padding:14px 22px; border-radius:10px; font-weight:700; color:#222; font-size:14px; min-width:140px; text-align:center; }

/* === FAQ === */
.faq-list{ max-width:880px; margin:0 auto; }
.faq-item{ background:var(--c-card); border:1px solid var(--c-line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.faq-q{ padding:16px 20px; cursor:pointer; font-weight:600; display:flex; justify-content:space-between; align-items:center; font-size:15px; }
.faq-q::after{ content:"+"; font-size:22px; color:var(--c-secondary); transition:.25s; }
.faq-item.open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:.3s; padding:0 20px; color:var(--c-muted); font-size:14px; }
.faq-item.open .faq-a{ max-height:300px; padding:0 20px 16px; }

/* === Reviews === */
.review-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.review-card{ background:var(--c-card); border:1px solid var(--c-line); border-radius:12px; padding:20px; }
.review-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-avatar{ width:42px; height:42px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.review-name{ font-weight:600; }
.review-stars{ color:#ffd83d; font-size:13px; }
.review-body{ color:var(--c-muted); font-size:14px; }

/* === How-to === */
.howto{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.howto-step{ background:var(--c-card); border:1px solid var(--c-line); border-radius:12px; padding:20px; text-align:center; position:relative; }
.howto-step .num{ width:42px; height:42px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px; }
.howto-step h3{ font-size:16px; margin-bottom:8px; }
.howto-step p{ font-size:13px; color:var(--c-muted); }

/* === Contact === */
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; }
.contact-info{ background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:26px; }
.contact-info h3{ font-size:20px; margin-bottom:14px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact-info p{ color:var(--c-muted); margin-bottom:8px; font-size:14px; }
.contact-info strong{ color:#fff; }
.contact-img img{ border-radius:14px; }
.contact-codes{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.contact-codes div{ text-align:center; }
.contact-codes img{ border-radius:10px; margin-bottom:6px; }
.contact-codes p{ font-size:12px; color:var(--c-muted); margin:0; }

/* === Share bar === */
.share-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:24px; }
.share-bar a{ padding:8px 16px; border-radius:20px; background:rgba(255,255,255,0.06); border:1px solid var(--c-line); color:#fff; font-size:13px; }
.share-bar a:hover{ background:var(--grad); border-color:transparent; }

/* === Footer === */
.site-footer{ background:#080514; border-top:1px solid var(--c-line); padding:50px 0 24px; margin-top:30px; }
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
.footer-cols h4{ color:#fff; font-size:15px; margin-bottom:14px; }
.footer-cols ul li{ margin-bottom:8px; }
.footer-cols a{ color:var(--c-muted); font-size:13px; }
.footer-cols a:hover{ color:var(--c-secondary); }
.footer-codes{ display:flex; gap:16px; }
.footer-codes div{ text-align:center; }
.footer-codes img{ width:96px; border-radius:8px; margin-bottom:6px; }
.footer-codes p{ font-size:12px; color:var(--c-muted); }
.footer-bottom{ border-top:1px solid var(--c-line); padding-top:20px; text-align:center; color:var(--c-muted); font-size:13px; }
.footer-bottom a{ color:var(--c-muted); }
.footer-bottom a:hover{ color:var(--c-secondary); }
.update-time{ display:inline-block; padding:4px 12px; background:rgba(142,45,226,.18); border-radius:12px; color:#d9b7ff; font-size:12px; margin-left:8px; }

/* === Page hero (inner pages) === */
.page-hero{ padding:60px 0 30px; background:linear-gradient(180deg,#1a1030,#0f0a1f); }
.page-hero h1{ font-size:34px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px; }
.breadcrumb{ font-size:13px; color:var(--c-muted); }
.breadcrumb a{ color:var(--c-muted); }
.breadcrumb a:hover{ color:var(--c-secondary); }

/* === Article === */
.article{ background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:30px; }
.article h2{ font-size:22px; margin:24px 0 12px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.article h3{ font-size:18px; margin:20px 0 10px; color:#fff; }
.article p{ margin-bottom:14px; color:#dfd6f5; }
.article img{ border-radius:10px; margin:14px 0; }
.article .tag{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:12px; background:rgba(142,45,226,.18); color:#d9b7ff; margin-right:6px; }

/* === Responsive === */
@media (max-width: 980px){
  .video-grid, .feature-grid, .expert-grid, .howto, .review-grid, .contact-grid, .footer-cols{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:30px; }
}
@media (max-width: 640px){
  .menu-toggle{ display:block; }
  .main-nav{ display:none; position:absolute; top:64px; left:0; right:0; background:#0f0a1f; padding:14px; border-top:1px solid var(--c-line); }
  .main-nav.show{ display:block; }
  .main-nav ul{ flex-direction:column; }
  .main-nav a{ display:block; }
  .search-box input{ width:140px; }
  .search-box input:focus{ width:160px; }
  .video-grid, .feature-grid, .expert-grid, .howto, .review-grid, .contact-grid, .footer-cols{ grid-template-columns:1fr; }
  .hero{ padding:40px 0; }
  .hero h1{ font-size:24px; }
  section{ padding:40px 0; }
}