/* ============================================================
   新葡京 - zqzb.cn 主样式表
   原创设计 | 版权所有 © 2026 新葡京
   ============================================================ */

/* ---------- CSS变量 ---------- */
:root {
  --primary: #0d1f3c;
  --secondary: #1a3a6e;
  --accent: #00c853;
  --accent2: #ff6b00;
  --text: #1a1a2e;
  --text-light: #5a6a7a;
  --bg: #f4f7fb;
  --bg-dark: #0a1628;
  --white: #ffffff;
  --card-bg: #ffffff;
  --border: #e0e8f0;
  --shadow: 0 4px 24px rgba(13,31,60,0.10);
  --shadow-hover: 0 8px 36px rgba(13,31,60,0.18);
  --radius: 12px;
  --radius-sm: 6px;
  --font: 'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
  --transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}

/* ---------- 通用工具类 ---------- */
.container{max-width:1240px;margin:0 auto;padding:0 20px;}
.section{padding:72px 0;}
.section-sm{padding:48px 0;}
.text-center{text-align:center;}
.text-accent{color:var(--accent);}
.text-accent2{color:var(--accent2);}
.flex{display:flex;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px;}
.badge-live{background:#ff3b30;color:#fff;}
.badge-hot{background:#ff6b00;color:#fff;}
.badge-new{background:#00c853;color:#fff;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;transition:var(--transition);cursor:pointer;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#00a844;transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,200,83,.35);}
.btn-secondary{background:var(--secondary);color:#fff;}
.btn-secondary:hover{background:#1e4a8a;transform:translateY(-2px);}
.btn-outline{border:2px solid var(--accent);color:var(--accent);}
.btn-outline:hover{background:var(--accent);color:#fff;}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;background:rgba(0,200,83,.12);color:var(--accent);font-weight:600;}

/* ---------- 顶部公告条 ---------- */
.top-bar{background:var(--primary);color:rgba(255,255,255,.85);font-size:13px;padding:7px 0;}
.top-bar .container{display:flex;align-items:center;justify-content:space-between;}
.top-bar-scroll{overflow:hidden;flex:1;margin:0 24px;}
.top-bar-scroll span{display:inline-block;white-space:nowrap;animation:marquee 28s linear infinite;}
@keyframes marquee{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}
.top-bar-links a{color:rgba(255,255,255,.75);font-size:12px;margin-left:16px;transition:color .2s;}
.top-bar-links a:hover{color:var(--accent);}

/* ---------- 顶部导航 ---------- */
.header{background:var(--primary);position:sticky;top:0;z-index:1000;box-shadow:0 2px 16px rgba(0,0,0,.25);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo img{height:44px;width:auto;border-radius:6px;}
.logo-text{color:#fff;font-size:22px;font-weight:800;letter-spacing:1px;line-height:1.2;}
.logo-text span{color:var(--accent);}
.logo-sub{font-size:11px;color:rgba(255,255,255,.6);font-weight:400;letter-spacing:.5px;}
.nav{display:flex;align-items:center;gap:2px;}
.nav a{color:rgba(255,255,255,.88);font-size:14px;font-weight:500;padding:8px 14px;border-radius:var(--radius-sm);transition:var(--transition);white-space:nowrap;}
.nav a:hover,.nav a.active{color:#fff;background:rgba(0,200,83,.18);}
.nav a.active{color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.btn-live{background:linear-gradient(135deg,#ff3b30,#ff6b00);color:#fff;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:700;animation:pulse-live 2s infinite;}
@keyframes pulse-live{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.4);}50%{box-shadow:0 0 0 8px rgba(255,59,48,0);}}
.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--transition);}

/* ---------- 搜索框 ---------- */
.search-bar{background:linear-gradient(135deg,var(--secondary) 0%,#0d2a5e 100%);padding:16px 0;}
.search-form{display:flex;align-items:center;max-width:680px;margin:0 auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:40px;overflow:hidden;backdrop-filter:blur(8px);}
.search-form input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:15px;padding:12px 20px;}
.search-form input::placeholder{color:rgba(255,255,255,.55);}
.search-form button{background:var(--accent);color:#fff;border:none;padding:12px 28px;font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap;}
.search-form button:hover{background:#00a844;}
.search-hot{text-align:center;margin-top:10px;font-size:12px;color:rgba(255,255,255,.6);}
.search-hot a{color:rgba(255,255,255,.8);margin:0 6px;transition:color .2s;}
.search-hot a:hover{color:var(--accent);}

/* ---------- Hero区域 ---------- */
.hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-image:url('../images/hero-banner.jpg');background-size:cover;background-position:center;filter:brightness(.45);}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,22,40,.92) 0%,rgba(13,31,60,.65) 60%,rgba(0,200,83,.12) 100%);}
.hero-content{position:relative;z-index:2;max-width:680px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,83,.15);border:1px solid rgba(0,200,83,.4);color:var(--accent);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:20px;}
.hero-badge::before{content:'';width:8px;height:8px;background:var(--accent);border-radius:50%;animation:blink 1.2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;color:#fff;line-height:1.2;margin-bottom:18px;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.hero h1 em{color:var(--accent);font-style:normal;}
.hero-desc{font-size:17px;color:rgba(255,255,255,.82);margin-bottom:32px;line-height:1.8;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);}
.hero-stat{text-align:center;}
.hero-stat-num{font-size:28px;font-weight:900;color:var(--accent);}
.hero-stat-label{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;}

/* ---------- 视频卡片 ---------- */
.video-card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);position:relative;}
.video-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
.video-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0d1f3c;}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.video-card:hover .video-thumb img{transform:scale(1.06);}
.video-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);background:rgba(0,0,0,.35);}
.video-card:hover .video-play-btn{opacity:1;}
.play-icon{width:56px;height:56px;background:rgba(0,200,83,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,200,83,.5);transform:scale(.85);transition:transform .25s;}
.video-card:hover .play-icon{transform:scale(1);}
.play-icon::after{content:'';border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px;}
.video-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:2px 7px;border-radius:4px;}
.video-live-tag{position:absolute;top:8px;left:8px;}
.video-info{padding:14px 16px;}
.video-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.video-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-light);}
.video-stats{display:flex;gap:12px;}
.video-stat{display:flex;align-items:center;gap:4px;}
.video-stat svg{width:13px;height:13px;}
.video-category{font-size:11px;color:var(--accent);font-weight:600;}

/* ---------- 区块标题 ---------- */
.section-header{margin-bottom:40px;}
.section-header h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--primary);position:relative;display:inline-block;}
.section-header h2::after{content:'';position:absolute;bottom:-6px;left:0;width:48px;height:4px;background:var(--accent);border-radius:2px;}
.section-header p{margin-top:16px;color:var(--text-light);font-size:16px;max-width:600px;}
.section-header-flex{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;}
.view-all{font-size:14px;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:4px;}
.view-all:hover{text-decoration:underline;}

/* ---------- 直播列表 ---------- */
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.live-card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:2px solid transparent;}
.live-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.live-card-top{position:relative;}
.live-card-top img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.live-viewers{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;padding:3px 8px;border-radius:4px;display:flex;align-items:center;gap:4px;}
.live-viewers::before{content:'';width:6px;height:6px;background:#ff3b30;border-radius:50%;animation:blink 1s infinite;}
.live-card-body{padding:14px;}
.live-match{font-size:16px;font-weight:800;color:var(--primary);margin-bottom:4px;}
.live-info{font-size:12px;color:var(--text-light);}
.live-score{font-size:22px;font-weight:900;color:var(--accent2);text-align:center;padding:8px 0;}

/* ---------- 专家展示 ---------- */
.expert-card{background:var(--card-bg);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);text-align:center;transition:var(--transition);}
.expert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.expert-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:3px solid var(--accent);}
.expert-name{font-size:17px;font-weight:700;color:var(--primary);}
.expert-title{font-size:13px;color:var(--text-light);margin-bottom:10px;}
.expert-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:14px;}
.expert-social{display:flex;justify-content:center;gap:10px;margin-top:12px;}
.expert-social a{width:32px;height:32px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-light);transition:var(--transition);}
.expert-social a:hover{background:var(--accent);color:#fff;}
.expert-actions{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.expert-actions a{font-size:12px;padding:6px 14px;border-radius:20px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto;}
.faq-item{background:var(--card-bg);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden;}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-size:16px;font-weight:600;color:var(--primary);transition:var(--transition);}
.faq-question:hover{color:var(--accent);}
.faq-question::after{content:'+';font-size:22px;font-weight:300;color:var(--accent);transition:transform .3s;}
.faq-item.open .faq-question::after{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-item.open .faq-answer{max-height:300px;}
.faq-answer p{padding:0 22px 18px;color:var(--text-light);font-size:15px;line-height:1.8;}

/* ---------- 用户评论 ---------- */
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.review-card{background:var(--card-bg);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);border-left:4px solid var(--accent);}
.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(--secondary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0;}
.review-name{font-weight:700;font-size:15px;color:var(--primary);}
.review-date{font-size:12px;color:var(--text-light);}
.review-stars{color:#ffc107;font-size:14px;margin-bottom:10px;}
.review-text{font-size:14px;color:var(--text-light);line-height:1.7;}
.review-platform{font-size:11px;color:var(--text-light);margin-top:10px;display:flex;align-items:center;gap:4px;}

/* ---------- 合作品牌 ---------- */
.partner-logos{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;}
.partner-logo{background:var(--card-bg);border-radius:var(--radius-sm);padding:14px 24px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;min-width:120px;font-weight:700;font-size:15px;color:var(--text-light);transition:var(--transition);}
.partner-logo:hover{box-shadow:var(--shadow-hover);color:var(--accent);}

/* ---------- 社区功能 ---------- */
.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.community-card{background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--radius);padding:28px 20px;text-align:center;color:#fff;transition:var(--transition);}
.community-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(13,31,60,.3);}
.community-icon{font-size:36px;margin-bottom:14px;}
.community-title{font-size:17px;font-weight:700;margin-bottom:8px;}
.community-desc{font-size:13px;color:rgba(255,255,255,.75);line-height:1.6;}
.community-btn{margin-top:16px;display:inline-block;background:rgba(0,200,83,.2);border:1px solid rgba(0,200,83,.5);color:var(--accent);padding:7px 18px;border-radius:20px;font-size:13px;transition:var(--transition);}
.community-btn:hover{background:var(--accent);color:#fff;}

/* ---------- AI赋能区 ---------- */
.ai-section{background:linear-gradient(135deg,#0a1628 0%,#0d2a5e 100%);color:#fff;}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.ai-content h2{color:#fff;}
.ai-content h2::after{background:var(--accent);}
.ai-features{margin-top:24px;}
.ai-feature{display:flex;gap:16px;margin-bottom:20px;padding:16px;background:rgba(255,255,255,.06);border-radius:var(--radius-sm);border-left:3px solid var(--accent);}
.ai-feature-icon{font-size:24px;flex-shrink:0;}
.ai-feature h4{font-size:15px;font-weight:700;margin-bottom:4px;}
.ai-feature p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.6;}
.ai-image{border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.4);}

/* ---------- 联系我们 ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-info h3{font-size:20px;font-weight:700;color:var(--primary);margin-bottom:20px;}
.contact-item{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start;}
.contact-icon{width:44px;height:44px;background:rgba(0,200,83,.1);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.contact-label{font-size:12px;color:var(--text-light);margin-bottom:2px;}
.contact-value{font-size:15px;font-weight:600;color:var(--primary);}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.qr-card{background:var(--card-bg);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow);}
.qr-code{width:120px;height:120px;margin:0 auto 10px;background:#f0f0f0;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.qr-code img{width:100%;height:100%;}
.qr-label{font-size:13px;font-weight:600;color:var(--primary);}
.qr-sub{font-size:11px;color:var(--text-light);}

/* ---------- 社交分享 ---------- */
.share-bar{background:var(--primary);padding:20px 0;}
.share-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.share-label{color:rgba(255,255,255,.7);font-size:14px;}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;transition:var(--transition);}
.share-btn:hover{transform:translateY(-2px);opacity:.9;}
.share-wechat{background:#07c160;}
.share-weibo{background:#e6162d;}
.share-douyin{background:#000;}
.share-bilibili{background:#00a1d6;}

/* ---------- 面包屑 ---------- */
.breadcrumb{padding:14px 0;font-size:13px;color:var(--text-light);}
.breadcrumb a{color:var(--text-light);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{margin:0 6px;}

/* ---------- 内页Hero ---------- */
.page-hero{background:linear-gradient(135deg,var(--primary),var(--secondary));padding:48px 0;color:#fff;}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin-bottom:12px;}
.page-hero p{font-size:16px;color:rgba(255,255,255,.8);max-width:600px;}

/* ---------- 侧边栏 ---------- */
.page-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
.sidebar{position:sticky;top:88px;}
.sidebar-widget{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px;}
.sidebar-widget h3{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--accent);}
.hot-list li{padding:10px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.hot-list li:last-child{border-bottom:none;}
.hot-num{width:22px;height:22px;border-radius:4px;background:var(--bg);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hot-num.top3{background:var(--accent2);color:#fff;}
.hot-list a{font-size:13px;color:var(--text);flex:1;line-height:1.4;}
.hot-list a:hover{color:var(--accent);}

/* ---------- 文章内容 ---------- */
.article-body{background:var(--card-bg);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
.article-body h2{font-size:1.4rem;font-weight:700;color:var(--primary);margin:28px 0 14px;}
.article-body h3{font-size:1.15rem;font-weight:700;color:var(--secondary);margin:20px 0 10px;}
.article-body p{color:var(--text-light);line-height:1.9;margin-bottom:16px;}
.article-body img{border-radius:var(--radius-sm);margin:20px 0;}
.article-body ul{padding-left:20px;margin-bottom:16px;}
.article-body ul li{list-style:disc;color:var(--text-light);line-height:1.8;margin-bottom:6px;}

/* ---------- 统计数字 ---------- */
.stats-bar{background:linear-gradient(135deg,var(--secondary),var(--primary));padding:40px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stat-item{color:#fff;}
.stat-num{font-size:2.4rem;font-weight:900;color:var(--accent);}
.stat-label{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px;}

/* ---------- 页脚 ---------- */
.footer{background:var(--bg-dark);color:rgba(255,255,255,.75);}
.footer-main{padding:56px 0 32px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:16px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.6);transition:var(--transition);}
.footer-social a:hover{background:var(--accent);color:#fff;}
.footer-col h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:13px;color:rgba(255,255,255,.55);transition:color .2s;}
.footer-col ul li a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:rgba(255,255,255,.4);}
.footer-bottom a:hover{color:var(--accent);}
.footer-qr{display:flex;gap:20px;margin-top:16px;}
.footer-qr-item{text-align:center;}
.footer-qr-item img{width:80px;height:80px;border-radius:6px;border:2px solid rgba(255,255,255,.15);}
.footer-qr-item p{font-size:11px;color:rgba(255,255,255,.5);margin-top:6px;}

/* ---------- 弹幕效果 ---------- */
.danmu-container{position:relative;height:60px;overflow:hidden;background:rgba(0,0,0,.3);border-radius:var(--radius-sm);margin:16px 0;}
.danmu-item{position:absolute;white-space:nowrap;color:#fff;font-size:14px;padding:4px 10px;border-radius:20px;background:rgba(0,200,83,.25);animation:danmu-move linear infinite;}
@keyframes danmu-move{from{transform:translateX(100vw);}to{transform:translateX(-100%);}  }

/* ---------- How-To步骤 ---------- */
.howto-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;counter-reset:step;}
.howto-step{background:var(--card-bg);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:relative;counter-increment:step;}
.howto-step::before{content:counter(step);position:absolute;top:-14px;left:20px;width:32px;height:32px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;}
.howto-step h4{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:8px;margin-top:8px;}
.howto-step p{font-size:13px;color:var(--text-light);line-height:1.7;}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .ai-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .page-layout{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .nav{display:none;position:fixed;top:68px;left:0;right:0;background:var(--primary);flex-direction:column;padding:16px;gap:4px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.3);}
  .nav.open{display:flex;}
  .menu-toggle{display:flex;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap;gap:20px;}
  .section{padding:48px 0;}
  .footer-grid{grid-template-columns:1fr;}
  .section-header-flex{flex-direction:column;align-items:flex-start;gap:12px;}
  .hero-actions{flex-direction:column;}
  .hero h1{font-size:1.8rem;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .live-grid{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr;}
  .community-grid{grid-template-columns:1fr 1fr;}
  .howto-steps{grid-template-columns:1fr;}
}

/* ---------- 懒加载占位 ---------- */
img[data-src]{background:linear-gradient(90deg,#e8edf2 25%,#f4f7fb 50%,#e8edf2 75%);background-size:200% 100%;animation:skeleton 1.5s infinite;}
@keyframes skeleton{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:#f0f4f8;}
::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ---------- 选中文字 ---------- */
::selection{background:var(--accent);color:#fff;}