.elevator { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.elevator a { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.25); position: relative; }
.elevator a::after { content: attr(data-label); position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(0.98); color: #e5e7eb; background: rgba(15,23,42,0.85); border: 1px solid rgba(255,255,255,0.18); padding: 4px 8px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s ease; white-space: nowrap; }
.elevator a:hover::after { opacity: 1; }
.elevator a.active { background: var(--brand); border-color: transparent; box-shadow: 0 0 0 4px rgba(14,165,233,0.25); }

@media (max-width: 720px) {
  .elevator { display: none; }
}
.snap { scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }
.fullscreen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; }
.fullscreen > h2 { margin-bottom: 24px; }
.aurora-bg { position: relative; background: radial-gradient(800px 400px at 20% -10%, rgba(14,165,233,0.35), rgba(14,165,233,0) 60%), radial-gradient(600px 300px at 85% -20%, rgba(139,92,246,0.30), rgba(139,92,246,0) 55%), #070a12; overflow: hidden; }
.aurora-bg #aurora-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; }
.aurora-bg:before, .aurora-bg:after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.aurora-bg:before { background: radial-gradient(600px 300px at 10% 20%, rgba(34,197,94,0.18), transparent 60%); filter: blur(20px); opacity: .9; }
.aurora-bg:after { background: radial-gradient(700px 350px at 90% 10%, rgba(14,165,233,0.18), transparent 60%); filter: blur(18px); opacity: .9; }

.hero-glass { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; padding: 108px 32px; max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.glass-card { backdrop-filter: blur(14px) saturate(140%); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; padding: 16px; box-shadow: 0 22px 46px rgba(0,0,0,0.35); }
.glass-card img { border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); }

/* 滚动进入动画 */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* 分屏进入特效 */
.features.stagger .card { opacity: 0; transform: translateY(16px); }
.features.stagger.play .card { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 80ms); }

@keyframes floatUp { from { opacity: 0; transform: translateY(18px) scale(0.98);} to { opacity: 1; transform: translateY(0) scale(1);} }
.screens.play img { opacity: 0; animation: floatUp .7s ease forwards; animation-delay: calc(var(--i, 0) * 90ms); }

@keyframes glowPulse { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,0); } 50% { box-shadow: 0 0 0 10px rgba(14,165,233,0.22);} 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0);} }
.glow-pulse { animation: glowPulse 1.4s ease-in-out 0s 3; }

/* 分段按钮 */
.segmented { display: inline-flex; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 8px; gap: 8px; margin-bottom: 18px; }
.seg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: #e5e7eb; border: 1px solid rgba(255,255,255,0.18); background: transparent; appearance: none; -webkit-appearance: none; }
.seg-btn:hover { background: rgba(255,255,255,0.10); }
.seg-btn.is-recommended, .seg-btn[aria-selected="true"] { background: linear-gradient(180deg, var(--brand), var(--brand-600)); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.seg-btn img { width: 16px; height: 16px; }
/* 基础变量与重置 */
:root {
  --bg: #0b1220;
  --bg-elev: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #0ea5e9;
  --brand-600: #0284c7;
  --good: #22c55e;
  --card: #111827;
  --border: #1f2937;
  --shadow: 0 10px 30px rgba(2, 132, 199, 0.25);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1220px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(14,165,233,0.15), transparent 60%),
              radial-gradient(900px 500px at 10% -10%, rgba(34,197,94,0.12), transparent 50%),
              var(--bg);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; }

.muted { color: var(--muted); }

/* 布局与容器 */
.section { padding: 64px 20px; }
.section > h2 { text-align: center; font-size: 28px; margin: 0 0 24px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(6, 1fr); max-width: var(--container); margin: 0 auto; }

/* 全宽深色 Hero 包裹 */
.hero-wrap {
  background: radial-gradient(1200px 600px at 20% -20%, rgba(14,165,233,0.35), rgba(14,165,233,0) 60%),
              radial-gradient(900px 500px at 90% -30%, rgba(99,102,241,0.35), rgba(99,102,241,0) 55%),
              linear-gradient(180deg, #05070d 0%, #0b1120 100%);
  padding-top: 20px;
  padding-bottom: 28px;
}

/* 头部导航 */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #0b1120; /* 纯色深色，避免与下方渐变混合 */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.site-header .brand, .site-header .nav { display: flex; align-items: center; }
.site-header .brand { gap: 10px; padding: 14px 20px; font-weight: 600; }
.site-header .brand img { filter: drop-shadow(0 2px 6px rgba(14,165,233,.35)); }
.site-header .nav { gap: 10px; margin-left: auto; padding: 0 20px; }
.site-header .nav a { padding: 8px 12px; border-radius: 8px; color: #e5e7eb; }
.site-header .nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.btn-small { padding: 8px 12px; border-radius: 10px; font-weight: 600; }
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-600)); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(2,132,199,.35); }
/* 红色强调按钮 */
.btn-danger { background: linear-gradient(180deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 10px 30px rgba(239,68,68,0.25); border: 1px solid transparent; }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(239,68,68,0.35); }
.btn-download { background: #111827; border: 1px solid var(--border); color: var(--text); }
.btn-download:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(2,132,199,0.12); }
.btn-download .os-icon { width: 18px; height: 18px; }
.btn-download.is-recommended { background: linear-gradient(180deg, var(--brand), var(--brand-600)); color: #fff; border-color: transparent; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-download.is-recommended:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(2,132,199,.35); }
.btn-download.is-recommended::after { content: "推荐"; margin-left: 8px; font-size: 12px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,0.2); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 20px; padding: 64px 20px; max-width: var(--container); margin: 0 auto; color: #fff; }
.hero-center { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 70vh; background: radial-gradient(1000px 500px at 50% -20%, rgba(14,165,233,.30), rgba(14,165,233,0) 60%), linear-gradient(180deg, #05070d 0%, #0b1120 100%); border-bottom: 1px solid rgba(255,255,255,0.06); }
.hero-center .hero-content { max-width: 760px; }
.hero-content h1 { font-size: 42px; line-height: 1.15; margin: 0 0 12px; color: #fff; }
.hero-content .subtitle { font-size: 18px; color: rgba(255,255,255,0.85); margin: 0 0 24px; }
.hero-cta { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; }
.os-hint { font-size: 13px; color: rgba(255,255,255,0.9); }
.hero-highlights { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; padding: 0; margin: 24px 0 0; }
.hero-highlights li { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.95); }

/* 系统下载瓷砖 */
.os-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.os-tiles .tile { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; background: #0f172a; border: 1px solid var(--border); border-radius: 14px; color: #e5e7eb; transition: all .2s ease; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.os-tiles .tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.35); }
.os-tiles img { width: 18px; height: 18px; }

.hero-art { position: relative; }
.hero-art .glow { position: absolute; inset: -20%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%); filter: blur(30px); z-index: 0; }
.hero-art img { position: relative; z-index: 1; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* Hero 下方横幅条 */
.promo-strip { padding: 14px 20px 0; }
.promo-strip .promo-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: var(--container); margin: 0 auto; }
.promo-strip a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }

/* 暗色渐变的统计区 */
.soft-bg { background: radial-gradient(1200px 600px at -10% -10%, rgba(14,165,233,0.10), rgba(14,165,233,0) 60%),
                         radial-gradient(900px 500px at 110% -20%, rgba(2,132,199,0.10), rgba(2,132,199,0) 55%),
                         #0b1220; }
.stats { max-width: var(--container); margin: 0 auto; padding: 38px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { background: #0f172a; border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.35); }
.stat-card .num { font-size: 36px; font-weight: 800; color: #e5e7eb; }
.stat-card .sub { color: var(--muted); margin-top: 6px; font-size: 13px; }

/* 双按钮 CTA 区 */
.dual-cta { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.dual-cta .btn { min-width: 160px; }

/* 功能卡片 */
.features .grid { grid-template-columns: repeat(3, 1fr); }
.card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

/* 功能卡片：图标与标签 */
.card[data-icon] { position: relative; padding-left: 64px; min-height: 72px; }
.card[data-icon]::before { content: ""; position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; background: linear-gradient(180deg, var(--brand), var(--brand-600)); opacity: .95; -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
/* 内置图标（简化版 SVG path） */
.card[data-icon="bank"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3 3 7v2h18V7l-9-4Zm-7 8v7H3v2h18v-2h-2v-7h-2v7H7v-7H5Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3 3 7v2h18V7l-9-4Zm-7 8v7H3v2h18v-2h-2v-7h-2v7H7v-7H5Z"/></svg>'); }
.card[data-icon="wallet"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 6h14a2 2 0 0 1 2 2v2h-6a2 2 0 0 0 0 4h6v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm12 6a1 1 0 1 0 0 2h4v-2h-4Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 6h14a2 2 0 0 1 2 2v2h-6a2 2 0 0 0 0 4h6v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm12 6a1 1 0 1 0 0 2h4v-2h-4Z"/></svg>'); }
.card[data-icon="unionpay"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="18" height="12" x="3" y="6" rx="2" ry="2" fill="%23000"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="18" height="12" x="3" y="6" rx="2" ry="2" fill="%23000"/></svg>'); }
.card[data-icon="jd"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M4 7h16v4H4V7Zm0 6h10v4H4v-4Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M4 7h16v4H4V7Zm0 6h10v4H4v-4Z"/></svg>'); }
.card[data-icon="qq"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2c2 0 4 2 3.8 4.2C17 7 18 9 18 11c0 3-2.2 6-6 6s-6-3-6-6c0-2 1-4 2.2-4.8C8 4 10 2 12 2Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2c2 0 4 2 3.8 4.2C17 7 18 9 18 11c0 3-2.2 6-6 6s-6-3-6-6c0-2 1-4 2.2-4.8C8 4 10 2 12 2Z"/></svg>'); }
.card[data-icon="douyin"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 3h3a5 5 0 0 0 5 5v3a8 8 0 1 1-8-8Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 3h3a5 5 0 0 0 5 5v3a8 8 0 1 1-8-8Z"/></svg>'); }
.card[data-icon="custom"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 9 8l-6 1 4 4-1 7 6-3 6 3-1-7 4-4-6-1-3-6Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 9 8l-6 1 4 4-1 7 6-3 6 3-1-7 4-4-6-1-3-6Z"/></svg>'); }

.card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.card .tag { font-size: 12px; color: #e5e7eb; border: 1px solid rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); }

/* 截图 */
.screens .screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.screens img { border-radius: var(--radius); border: 1px solid var(--border); background: #0b1120; }
.zoom-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px; }
.zoom-modal.open { display: flex; }
.zoom-modal img { max-width: 92vw; max-height: 92vh; border-radius: 14px; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }

/* 视频专区 */
.videos h2 { text-align: center; margin-bottom: 10px; }
.videos .videos-toolbar { max-width: var(--container); margin: 0 auto 12px; padding: 0 20px; display: flex; gap: 10px; align-items: center; justify-content: center; }
.videos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.video-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.video-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: #0b1120; display: flex; align-items: center; justify-content: center; }
.video-thumb::after { content: "▶"; font-size: 38px; color: rgba(255,255,255,0.9); text-shadow: 0 6px 20px rgba(0,0,0,.6); }
.video-title { padding: 10px 12px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.video-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 400; padding: 20px; }
.video-modal.open { display: flex; }
.video-modal video { width: min(90vw, 1080px); height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 18px 40px rgba(0,0,0,.6); background: #000; }

@media (max-width: 1200px) { .videos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .videos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }

/* 下载区域 - 已移除可视样式（保留占位以便未来恢复） */

/* FAQ */
.faq .faq-list { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.faq details { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
.faq details + details { margin-top: 14px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq .details-body { color: var(--muted); margin-top: 8px; }

/* 页脚 */
.site-footer { border-top: 1px solid var(--border); padding: 20px; margin-top: 40px; background: rgba(255,255,255,0.02); }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; max-width: var(--container); margin: 0 auto; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.foot-nav { display: inline-flex; gap: 10px; }
.foot-nav a { color: var(--muted); }
.foot-nav a:hover { color: var(--text); }
.foot-meta { display: inline-flex; gap: 12px; color: var(--muted); }

/* 自适应 */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding-top: 36px; }
  .hero-glass { grid-template-columns: 1fr; gap: 28px; padding: 84px 20px; }
  .hero-content h1 { font-size: 34px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .features .grid { grid-template-columns: 1fr; }
  .screens .screens-grid { grid-template-columns: 1fr; }
  .download .download-grid { grid-template-columns: 1fr; }
  /* 移动端显示导航并可横向滚动 */
  .site-header .nav { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; padding: 8px 12px; }
  .site-header .nav a { padding: 6px 10px; }
  .promo-strip .promo-inner { grid-template-columns: 1fr; }
}

/* 可访问性焦点 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }

/* BGM 浮动播放器 */
.bgm-widget { position: fixed; right: 16px; bottom: 16px; display: none; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(15,23,42,0.9); backdrop-filter: blur(6px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); z-index: 500; }
.bgm-widget.show { display: inline-flex; }
.bgm-title { color: #e5e7eb; font-size: 13px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgm-btn { color: #e5e7eb; background: linear-gradient(180deg, var(--brand), var(--brand-600)); border: 0; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.bgm-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.bgm-close { background: #ef4444; }

/* Guide 页面居中容器 */
.guide-wrap { max-width: 980px; margin: 0 auto; }
.guide-wrap section.section { padding-left: 0; padding-right: 0; }

/* 文章列表 */
.articles h2 { text-align: center; margin-bottom: 10px; }
.articles .articles-toolbar { max-width: var(--container); margin: 0 auto 12px; padding: 0 20px; display: flex; gap: 10px; align-items: center; justify-content: center; }
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 320px)); justify-content: center; gap: 16px; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.articles-grid .article-card { width: 100%; max-width: 320px; }
.article-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; color: inherit; }
.article-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.article-cover { position: relative; aspect-ratio: 16/9; background: #0b1120; background-size: cover; background-position: center; }
.article-title { padding: 10px 12px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-meta { padding: 0 12px 12px; font-size: 12px; color: var(--muted); }
@media (max-width: 1024px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .articles-grid { grid-template-columns: 1fr; } }

/* 文章详情页 */
.article { max-width: 860px; margin: 0 auto; padding: 20px; }
.article h1 { text-align: center; margin: 0 0 8px; }
.article .meta { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.article img { border-radius: var(--radius); border: 1px solid var(--border); background: #0b1120; margin: 10px 0; }