/* roulang page: index */
:root {
  --bg-ink: #0B0F14;
  --bg-ink-2: #141A21;
  --line-ink: rgba(255,255,255,0.08);
  --bg-paper: #F6F5F1;
  --bg-card: #FFFFFF;
  --line-paper: #E1E1DA;
  --accent-gold: #C8A15A;
  --gold-weak: rgba(200,161,90,0.14);
  --accent-green: #A6FF3E;
  --accent-rose: #F05E6C;
  --text-dark: #E9ECEF;
  --text-dark-sub: #9AA4B2;
  --text-light: #1E252C;
  --text-light-sub: #667085;
  --text-weak: #98A2B3;
  --radius-card: 12px;
  --radius-btn: 8px;
  --shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06);
  --shadow-card-hover: 0 4px 8px rgba(16,24,40,0.06), 0 16px 32px rgba(16,24,40,0.10);
  --container: 1200px;
  --font-cn: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
  --font-en: "Inter", "Helvetica", "Arial", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-cn); background: var(--bg-paper); color: var(--text-light); line-height: 1.75; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; font-size: inherit; border: none; background: none; outline: none; }
ul, ol { list-style: none; }
.ba-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.ba-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: var(--radius-btn); font-weight: 700; font-size: 16px; cursor: pointer; transition: all .25s ease; gap: 8px; line-height: 1; text-decoration: none; }
.ba-btn-primary { background: var(--accent-gold); color: #0B0F14; }
.ba-btn-primary:hover { filter: brightness(1.08); transform: translateX(2px); }
.ba-btn-primary:active { transform: translateY(1px); }
.ba-btn-outline { background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold); height: 44px; }
.ba-btn-outline:hover { background: var(--gold-weak); }
.ba-btn-text { background: transparent; color: var(--text-dark); padding: 0 8px; height: 44px; font-weight: 500; }
.ba-btn-text:hover { color: var(--accent-gold); }
.ba-section-tag { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-gold); background: var(--gold-weak); padding: 4px 14px; border-radius: 999px; margin-bottom: 16px; }
/* Header */
.ba-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px; background: rgba(11,15,20,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: all .3s ease; }
.ba-header.scrolled { background: rgba(11,15,20,0.92); border-bottom-color: var(--line-ink); }
.ba-header-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ba-logo { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .02em; white-space: nowrap; }
.ba-logo span { color: var(--accent-gold); }
.ba-nav { display: flex; align-items: center; gap: 32px; }
.ba-nav-link { position: relative; font-size: 15px; font-weight: 600; color: var(--text-dark-sub); padding: 8px 0; transition: color .2s; }
.ba-nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent-gold); transition: width .3s ease; }
.ba-nav-link:hover { color: #fff; }
.ba-nav-link:hover::after { width: 16px; }
.ba-nav-link.active { color: var(--accent-gold); }
.ba-nav-link.active::after { width: 16px; background: var(--accent-gold); }
.ba-nav-link.active::before { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-gold); }
.ba-header-actions { display: flex; align-items: center; gap: 16px; }
.ba-burger { display: none; flex-direction: column; gap: 5px; width: 32px; height: 32px; justify-content: center; align-items: center; cursor: pointer; }
.ba-burger span { width: 20px; height: 2px; background: #fff; transition: all .3s; display: block; }
.ba-burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ba-burger.active span:nth-child(2) { opacity: 0; }
.ba-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Hero */
.ba-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-ink); }
.ba-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba-hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(200,161,90,0.18), transparent 55%), radial-gradient(ellipse at 70% 70%, rgba(166,255,62,0.08), transparent 45%), linear-gradient(180deg, rgba(11,15,20,0.3) 0%, rgba(11,15,20,0.85) 100%); }
.ba-hero-content { position: relative; z-index: 2; text-align: center; padding-top: 72px; }
.ba-hero-title { font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.12; color: #fff; letter-spacing: .02em; margin-bottom: 24px; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.ba-hero-title em { font-style: normal; color: var(--accent-gold); }
.ba-hero-subtitle { font-size: 18px; color: var(--text-dark-sub); max-width: 680px; margin: 0 auto 40px; line-height: 1.8; font-weight: 400; }
.ba-hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.ba-hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--text-dark-sub); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ba-hero-scroll i { animation: baBounce 2s infinite; }
@keyframes baBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
/* Trust Bar */
.ba-trust { background: var(--bg-ink); border-top: 1px solid var(--line-ink); }
.ba-trust-inner { display: flex; justify-content: space-around; flex-wrap: wrap; padding: 32px 0; }
.ba-trust-item { display: flex; align-items: center; gap: 14px; padding: 12px 24px; }
.ba-trust-item i { font-size: 20px; color: var(--accent-gold); flex-shrink: 0; }
.ba-trust-item span { font-size: 15px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.ba-trust-item small { font-size: 13px; color: var(--text-dark-sub); display: block; }
.ba-trust-divider { width: 1px; height: 40px; background: var(--line-ink); align-self: center; }
/* Section common */
.ba-section { padding: 96px 0; }
.ba-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.ba-section-head h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 700; color: var(--text-light); line-height: 1.3; margin-bottom: 12px; }
.ba-section-head p { font-size: 16px; color: var(--text-light-sub); line-height: 1.7; }
/* Howto Timeline */
.ba-howto { background: var(--bg-paper); }
.ba-howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ba-howto-steps { position: relative; padding-left: 32px; }
.ba-howto-steps::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--accent-gold), var(--accent-green)); border-radius: 2px; }
.ba-step { position: relative; padding: 24px 0 24px 32px; }
.ba-step::before { content: ''; position: absolute; left: -32px; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 0 4px var(--gold-weak); }
.ba-step-num { font-size: 32px; font-weight: 800; color: var(--accent-gold); font-family: var(--font-en); letter-spacing: -.02em; line-height: 1; display: block; margin-bottom: 8px; }
.ba-step-body h3 { font-size: 20px; font-weight: 700; color: var(--text-light); margin-bottom: 6px; }
.ba-step-body p { font-size: 15px; color: var(--text-light-sub); line-height: 1.7; }
.ba-howto-visual { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.ba-howto-visual img { width: 100%; height: 420px; object-fit: cover; }
/* Rewards */
.ba-rewards { background: var(--bg-ink); position: relative; overflow: hidden; }
.ba-rewards::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.ba-rewards .ba-section-head h2 { color: #fff; }
.ba-rewards .ba-section-head p { color: var(--text-dark-sub); }
.ba-rewards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; }
.ba-reward-card { background: var(--bg-ink-2); border: 1px solid var(--line-ink); border-radius: var(--radius-card); padding: 36px 32px; transition: all .3s ease; position: relative; }
.ba-reward-card:hover { border-color: var(--accent-gold); box-shadow: 0 0 24px rgba(200,161,90,0.1); }
.ba-reward-level { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent-gold); background: var(--gold-weak); padding: 4px 14px; border-radius: 999px; letter-spacing: .04em; margin-bottom: 20px; }
.ba-reward-value { font-size: 56px; font-weight: 800; color: #fff; font-family: var(--font-en); line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; }
.ba-reward-unit { font-size: 14px; color: var(--text-dark-sub); font-weight: 500; }
.ba-reward-card p { font-size: 14px; color: var(--text-dark-sub); margin: 16px 0 20px; line-height: 1.6; }
.ba-reward-link { font-size: 14px; font-weight: 600; color: var(--accent-gold); text-decoration: none; border-top: 1px solid var(--line-ink); padding-top: 16px; display: inline-block; transition: color .2s; }
.ba-reward-link:hover { color: #fff; }
.ba-reward-icon { font-size: 32px; color: var(--accent-gold); margin-bottom: 16px; }
/* Progress */
.ba-progress { background: var(--bg-paper); }
.ba-progress-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.ba-progress-left { text-align: center; padding: 40px; background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ba-progress-ring { width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(var(--accent-green) 68%, #E8E8E3 68%); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; position: relative; }
.ba-progress-ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--bg-card); }
.ba-progress-ring span { position: relative; z-index: 1; font-size: 40px; font-weight: 800; color: var(--text-light); font-family: var(--font-en); }
.ba-progress-left h3 { font-size: 18px; font-weight: 700; color: var(--text-light); margin-bottom: 6px; }
.ba-progress-left p { font-size: 14px; color: var(--text-light-sub); }
.ba-progress-right h2 { font-size: 24px; font-weight: 700; color: var(--text-light); margin-bottom: 24px; }
.ba-task-list { display: flex; flex-direction: column; gap: 4px; }
.ba-task-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid transparent; transition: all .2s; box-shadow: 0 1px 3px rgba(16,24,40,0.03); }
.ba-task-item:hover { border-color: var(--accent-gold); }
.ba-task-name { font-size: 15px; font-weight: 600; color: var(--text-light); display: flex; align-items: center; gap: 12px; }
.ba-task-name i { color: var(--text-weak); font-size: 16px; width: 20px; }
.ba-badge { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.ba-badge.done { background: rgba(18,183,106,0.12); color: #12B76A; }
.ba-badge.claim { background: rgba(166,255,62,0.15); color: #5A9E0F; }
.ba-badge.locked { background: rgba(247,144,9,0.12); color: #F79009; }
.ba-badge.doing { background: rgba(166,255,62,0.1); color: #6BBF00; }
/* CTA */
.ba-cta { background: var(--bg-ink); position: relative; border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink); text-align: center; padding: 80px 0; }
.ba-cta-inner { max-width: 640px; margin: 0 auto; }
.ba-cta h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.ba-cta p { font-size: 16px; color: var(--text-dark-sub); margin-bottom: 32px; }
.ba-cta .ba-btn-primary { font-size: 18px; padding: 0 40px; height: 52px; }
/* News */
.ba-news { background: var(--bg-paper); }
.ba-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ba-news-card { background: var(--bg-card); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: all .3s ease; border: 1px solid transparent; }
.ba-news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--line-paper); }
.ba-news-inner { display: block; }
.ba-news-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ba-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ba-news-card:hover .ba-news-media img { transform: scale(1.04); }
.ba-news-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(11,15,20,0.12) 100%); }
.ba-news-chip { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 12px; font-weight: 700; color: #fff; background: rgba(11,15,20,0.7); padding: 4px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
.ba-news-content { padding: 24px 24px 20px; }
.ba-news-content h3 { font-size: 18px; font-weight: 700; color: var(--text-light); line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ba-news-content p { font-size: 14px; color: var(--text-light-sub); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }
.ba-news-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-weak); font-variant-numeric: tabular-nums; }
.ba-news-meta i { font-size: 12px; }
.ba-empty { grid-column: 1 / -1; text-align: center; padding: 60px 24px; color: var(--text-weak); font-size: 15px; background: var(--bg-card); border-radius: var(--radius-card); border: 1px dashed var(--line-paper); }
/* FAQ */
.ba-faq { background: var(--bg-ink); }
.ba-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
.ba-faq-left .ba-section-tag { margin-bottom: 16px; }
.ba-faq-left h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.3; }
.ba-faq-left p { font-size: 15px; color: var(--text-dark-sub); line-height: 1.7; }
.ba-faq-right { display: flex; flex-direction: column; }
.ba-faq-item { border-bottom: 1px solid var(--line-ink); }
.ba-faq-q { width: 100%; text-align: left; padding: 24px 16px; font-size: 16px; font-weight: 600; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s; }
.ba-faq-q:hover { color: var(--accent-gold); }
.ba-faq-q .ba-faq-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.ba-faq-q .ba-faq-icon::before, .ba-faq-q .ba-faq-icon::after { content: ''; position: absolute; background: var(--accent-gold); transition: all .3s; }
.ba-faq-q .ba-faq-icon::before { top: 8px; left: 0; width: 20px; height: 2px; }
.ba-faq-q .ba-faq-icon::after { top: 0; left: 8px; width: 2px; height: 20px; }
.ba-faq-item.open .ba-faq-q .ba-faq-icon::after { transform: scaleY(0); }
.ba-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.ba-faq-item.open .ba-faq-a { max-height: 240px; }
.ba-faq-a p { padding: 0 16px 24px; font-size: 15px; color: var(--text-dark-sub); line-height: 1.75; }
/* Contact */
.ba-contact { background: var(--bg-paper); }
.ba-contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.ba-contact-left h2 { font-size: 32px; font-weight: 800; color: var(--text-light); margin-bottom: 16px; line-height: 1.3; }
.ba-contact-left p { font-size: 15px; color: var(--text-light-sub); line-height: 1.75; max-width: 360px; }
.ba-contact-form { background: var(--bg-card); border-radius: var(--radius-card); padding: 40px; box-shadow: var(--shadow-card); }
.ba-form-group { position: relative; margin-bottom: 28px; }
.ba-form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--text-light); margin-bottom: 6px; }
.ba-form-group input, .ba-form-group textarea { width: 100%; border-bottom: 1px solid var(--line-paper); padding: 10px 2px; font-size: 15px; color: var(--text-light); background: transparent; transition: border-color .3s; border-radius: 0; resize: none; }
.ba-form-group input:focus, .ba-form-group textarea:focus { border-bottom-color: var(--accent-gold); }
.ba-form-group input::placeholder, .ba-form-group textarea::placeholder { color: var(--text-weak); }
.ba-form-group textarea { height: 100px; }
.ba-contact-form .ba-btn { width: 100%; margin-top: 8px; }
/* Footer */
.ba-footer { background: var(--bg-ink); border-top: 1px solid var(--line-ink); padding: 64px 0 0; }
.ba-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.ba-footer-logo { font-size: 22px; font-weight: 800; color: #fff; display: inline-block; margin-bottom: 16px; }
.ba-footer-logo span { color: var(--accent-gold); }
.ba-footer-brand p { font-size: 14px; color: var(--text-dark-sub); line-height: 1.6; max-width: 280px; }
.ba-footer-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 20px; letter-spacing: .04em; }
.ba-footer-col a { display: block; font-size: 14px; color: var(--text-dark-sub); padding: 6px 0; transition: color .2s; }
.ba-footer-col a:hover { color: var(--accent-gold); }
.ba-footer-col p { font-size: 14px; color: var(--text-dark-sub); line-height: 1.8; }
.ba-footer-bottom { border-top: 1px solid var(--line-ink); padding: 24px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ba-footer-bottom p { font-size: 13px; color: var(--text-weak); }
/* Responsive */
@media (max-width: 1024px) {
  .ba-container { padding: 0 24px; }
  .ba-howto-grid { grid-template-columns: 1fr; gap: 40px; }
  .ba-progress-grid { grid-template-columns: 1fr; gap: 40px; }
  .ba-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .ba-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .ba-rewards-grid { grid-template-columns: repeat(2, 1fr); }
  .ba-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .ba-nav { gap: 20px; }
}
@media (max-width: 768px) {
  .ba-container { padding: 0 20px; }
  .ba-header-inner { padding: 0 20px; }
  .ba-nav { position: fixed; top: 72px; left: 0; right: 0; background: rgba(11,15,20,0.98); flex-direction: column; padding: 24px 20px; gap: 4px; transform: translateY(-120%); transition: transform .3s ease; border-bottom: 1px solid var(--line-ink); align-items: flex-start; }
  .ba-nav.open { transform: translateY(0); }
  .ba-nav-link { width: 100%; padding: 14px 0; font-size: 16px; color: var(--text-dark); border-bottom: 1px solid var(--line-ink); }
  .ba-burger { display: flex; }
  .ba-hero-title { font-size: 2.2rem; }
  .ba-hero-subtitle { font-size: 16px; }
  .ba-trust-inner { flex-direction: column; gap: 16px; padding: 24px 0; }
  .ba-trust-item { justify-content: center; flex-wrap: wrap; }
  .ba-trust-divider { display: none; }
  .ba-rewards-grid { grid-template-columns: 1fr; }
  .ba-news-grid { grid-template-columns: 1fr; }
  .ba-progress-left { padding: 24px; }
  .ba-cta h2 { font-size: 26px; }
  .ba-section { padding: 64px 0; }
  .ba-faq-a { max-height: 0; }
  .ba-faq-item.open .ba-faq-a { max-height: 400px; }
  .ba-form-group input, .ba-form-group textarea { font-size: 16px; }
  .ba-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .ba-footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
  .ba-hero-actions { flex-direction: column; width: 100%; }
  .ba-hero-actions .ba-btn { width: 100%; }
  .ba-howto-visual img { height: 260px; }
  .ba-step-num { font-size: 26px; }
  .ba-contact-form { padding: 28px 20px; }
}

/* roulang page: article */
:root {
  --bg-ink: #0B0F14;
  --bg-ink-2: #141A21;
  --line-ink: rgba(255,255,255,0.08);
  --bg-paper: #F6F5F1;
  --bg-card: #FFFFFF;
  --line-paper: #E1E1DA;
  --accent-gold: #C8A15A;
  --gold-weak: rgba(200,161,90,0.14);
  --accent-green: #A6FF3E;
  --accent-rose: #F05E6C;
  --success: #12B76A;
  --pending: #F79009;
  --text-main: #1E252C;
  --text-sub: #667085;
  --text-weak: #98A2B3;
  --radius-card: 12px;
  --radius-btn: 8px;
  --container: 1200px;
  --shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06);
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-main);
  background: var(--bg-paper);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}
input, textarea {
  font-family: inherit;
}
.ba-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.ba-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,245,241,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-paper);
  height: 72px;
  transition: box-shadow 0.3s ease;
}
.ba-header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.ba-header-inner {
  max-width: 1200px;
  height: 72px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.ba-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ba-logo span {
  color: var(--accent-gold);
  font-weight: 600;
}
.ba-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  justify-content: center;
}
.ba-nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-sub);
  padding: 8px 2px;
  position: relative;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.ba-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: width 0.3s ease;
}
.ba-nav-link:hover {
  color: var(--text-main);
}
.ba-nav-link:hover::after {
  width: 16px;
}
.ba-nav-link.active {
  color: var(--text-main);
  font-weight: 600;
}
.ba-nav-link.active::after {
  width: 16px;
}
.ba-nav-link.active::before {
  content: '';
  position: absolute;
  left: 20px;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-gold);
}
.ba-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.ba-btn-outline {
  background: transparent;
  border: 1px solid var(--accent-gold);
  color: #8c6d38;
  height: 40px;
  padding: 0 20px;
}
.ba-btn-outline:hover {
  background: var(--gold-weak);
  color: #6d5227;
}
.ba-btn-outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,161,90,0.3);
}
.ba-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.ba-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ba-burger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ba-burger.active span:nth-child(2) {
  opacity: 0;
}
.ba-burger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.beat-art-wrap {
  background: var(--bg-paper);
  padding: 56px 0 96px;
}
.beat-art-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.beat-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--text-weak);
  margin-bottom: 40px;
}
.beat-breadcrumb a {
  color: var(--text-sub);
  transition: color 0.2s ease;
}
.beat-breadcrumb a:hover {
  color: var(--accent-gold);
}
.beat-breadcrumb .beat-sep {
  color: var(--line-paper);
  margin: 0 2px;
}
.beat-breadcrumb .beat-cur {
  color: var(--text-weak);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beat-article-head {
  max-width: 760px;
  margin: 0 auto 40px;
}
.beat-article-category {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--gold-weak);
  color: #8c6d38;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.beat-article-head h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.25;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.beat-article-abstract {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-sub);
  margin-bottom: 24px;
}
.beat-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--text-weak);
  border-top: 1px solid var(--line-paper);
  padding-top: 20px;
}
.beat-article-meta .beat-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-paper);
}
.beat-article-body {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 48px;
  font-size: 16px;
}
.beat-article-body h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin: 1.6em 0 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--line-paper);
}
.beat-article-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin: 1.5em 0 0.7em;
}
.beat-article-body h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
  margin: 1.3em 0 0.6em;
}
.beat-article-body p {
  margin-bottom: 1.5em;
  line-height: 1.85;
  color: var(--text-main);
}
.beat-article-body ul,
.beat-article-body ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.beat-article-body li {
  margin: 0.45em 0;
  line-height: 1.75;
  color: var(--text-main);
}
.beat-article-body li::marker {
  color: var(--accent-gold);
}
.beat-article-body blockquote {
  margin: 1.5em 0;
  padding: 18px 24px;
  border-left: 4px solid var(--accent-gold);
  background: #F9F8F4;
  border-radius: 0 8px 8px 0;
  color: var(--text-sub);
  font-size: 0.98em;
  line-height: 1.75;
}
.beat-article-body blockquote p {
  margin-bottom: 0.5em;
}
.beat-article-body blockquote p:last-child {
  margin-bottom: 0;
}
.beat-article-body code {
  background: #F2F1EB;
  color: #9A6B2F;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.beat-article-body pre {
  background: var(--bg-ink);
  color: #E9ECEF;
  padding: 24px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 0 0 1.6em;
  line-height: 1.65;
  font-size: 0.92em;
}
.beat-article-body pre code {
  background: none;
  color: inherit;
  padding: 0;
}
.beat-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.95em;
  border-radius: 8px;
  overflow: hidden;
}
.beat-article-body th,
.beat-article-body td {
  border: 1px solid var(--line-paper);
  padding: 12px 16px;
  text-align: left;
}
.beat-article-body th {
  background: #F9F8F4;
  font-weight: 600;
  color: var(--text-main);
}
.beat-article-body td {
  color: var(--text-sub);
}
.beat-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
  box-shadow: 0 2px 12px rgba(16,24,40,0.08);
}
.beat-article-body a {
  color: #9A6B2F;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200,161,90,0.5);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.beat-article-body a:hover {
  color: var(--accent-gold);
  text-decoration-color: var(--accent-gold);
}
.beat-article-empty {
  text-align: center;
  padding: 64px 24px;
}
.beat-article-empty p {
  font-size: 18px;
  color: var(--text-sub);
  margin-bottom: 16px;
}
.beat-article-empty a {
  display: inline-block;
  margin-top: 8px;
  color: #8c6d38;
  font-weight: 600;
  padding: 10px 28px;
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-btn);
  transition: background 0.2s ease, color 0.2s ease;
}
.beat-article-empty a:hover {
  background: var(--gold-weak);
}
.beat-related {
  max-width: 760px;
  margin: 56px auto 0;
}
.beat-related h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.beat-related h2::before {
  content: '';
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--accent-gold);
}
.beat-related-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.beat-related-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-card);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.beat-related-card:hover {
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 28px rgba(16,24,40,0.08);
  transform: translateY(-2px);
  border-color: rgba(200,161,90,0.4);
}
.beat-related-card img {
  width: 150px;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #EEE;
}
.beat-related-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.beat-related-info h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beat-related-info time {
  font-size: 13px;
  color: var(--text-weak);
  font-variant-numeric: tabular-nums;
}
.ba-footer {
  background: var(--bg-paper);
  border-top: 1px solid var(--line-paper);
  padding: 64px 0 32px;
}
.ba-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.ba-footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
  margin-top: 16px;
  max-width: 280px;
}
.ba-footer-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}
.ba-footer-logo span {
  color: var(--accent-gold);
}
.ba-footer-col h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}
.ba-footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
.ba-footer-col a:hover {
  color: var(--accent-gold);
}
.ba-footer-col p {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 10px;
  line-height: 1.6;
}
.ba-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--line-paper);
  padding-top: 24px;
  font-size: 13px;
  color: var(--text-weak);
}
.ba-footer-bottom p {
  margin: 0;
}
@media (max-width: 1024px) {
  .ba-nav {
    gap: 20px;
  }
  .ba-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .ba-header-inner {
    padding: 0 24px;
  }
  .ba-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(246,245,241,0.98);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--line-paper);
    transform: translateY(-120%);
    transition: transform 0.35s ease;
    z-index: 99;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  }
  .ba-nav.open {
    transform: translateY(0);
  }
  .ba-burger {
    display: flex;
  }
  .ba-header-actions .ba-btn-outline {
    display: none;
  }
  .ba-container {
    padding: 0 24px;
  }
  .beat-art-inner {
    padding: 0 20px;
  }
  .beat-art-wrap {
    padding: 40px 0 72px;
  }
  .beat-article-body {
    padding: 28px 20px;
  }
  .beat-article-body h2 {
    font-size: 1.3rem;
  }
  .beat-article-body h3 {
    font-size: 1.12rem;
  }
  .beat-related-card img {
    width: 110px;
    height: 74px;
  }
  .beat-article-head h1 {
    font-size: 1.6rem;
  }
  .beat-breadcrumb {
    font-size: 13px;
    margin-bottom: 28px;
  }
}
@media (max-width: 520px) {
  .ba-header-inner {
    padding: 0 20px;
  }
  .ba-logo {
    font-size: 19px;
  }
  .beat-art-inner {
    padding: 0 16px;
  }
  .beat-article-body {
    padding: 20px 16px;
    font-size: 15px;
  }
  .beat-article-abstract {
    font-size: 15px;
  }
  .beat-related-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .beat-related-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .ba-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ba-footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
  .beat-breadcrumb .beat-cur {
    max-width: 180px;
  }
}

/* roulang page: category1 */
:root{
  --bg-ink:#0B0F14;
  --bg-ink-2:#141A21;
  --line-ink:rgba(255,255,255,0.08);
  --bg-paper:#F6F5F1;
  --bg-card:#FFFFFF;
  --line-paper:#E1E1DA;
  --accent-gold:#C8A15A;
  --gold-weak:rgba(200,161,90,0.14);
  --accent-green:#A6FF3E;
  --accent-rose:#F05E6C;
  --success:#12B76A;
  --process:#A6FF3E;
  --warning:#F79009;
  --text-primary:#1E252C;
  --text-secondary:#667085;
  --text-weak:#98A2B3;
  --text-dark-primary:#E9ECEF;
  --text-dark-secondary:#9AA4B2;
  --radius-card:12px;
  --radius-btn:8px;
  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(16,24,40,0.04),0 8px 24px rgba(16,24,40,0.06);
  --shadow-card-hover:0 4px 8px rgba(16,24,40,0.06),0 16px 32px rgba(16,24,40,0.12);
  --container:1200px;
  --font-main:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",Inter,Helvetica,Arial,sans-serif;
  --transition:all .25s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-main);
  background:var(--bg-paper);
  color:var(--text-primary);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
.ba-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* ===== 按钮 ===== */
.ba-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 28px;
  border-radius:var(--radius-btn);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  transition:var(--transition);
  cursor:pointer;
}
.ba-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(200,161,90,0.35);
}
.ba-btn-primary{
  background:var(--accent-gold);
  color:var(--text-primary);
}
.ba-btn-primary:hover{
  filter:brightness(1.05);
  transform:translateX(2px);
}
.ba-btn-primary:active{
  transform:translateY(1px);
}
.ba-btn-outline{
  background:transparent;
  border-color:var(--accent-gold);
  color:#8B6F41;
}
.ba-btn-outline:hover{
  background:var(--gold-weak);
  border-color:var(--accent-gold);
}
.ba-btn-outline:active{
  transform:translateY(1px);
}

/* ===== Header ===== */
.ba-header{
  position:sticky;
  top:0;
  z-index:100;
  height:72px;
  background:rgba(246,245,241,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-paper);
}
.ba-header-inner{
  max-width:var(--container);
  height:100%;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.ba-logo{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:0.01em;
  color:var(--text-primary);
  white-space:nowrap;
}
.ba-logo span{
  color:var(--accent-gold);
}
.ba-nav{
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto;
}
.ba-nav-link{
  position:relative;
  font-size:1rem;
  font-weight:600;
  color:var(--text-secondary);
  padding:8px 0;
  transition:var(--transition);
  white-space:nowrap;
}
.ba-nav-link:hover{
  color:var(--text-primary);
}
.ba-nav-link:hover::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:16px;
  height:2px;
  background:var(--accent-gold);
}
.ba-nav-link.active{
  color:var(--text-primary);
}
.ba-nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:16px;
  height:2px;
  background:var(--accent-gold);
}
.ba-nav-link.active::before{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent-gold);
}
.ba-header-actions{
  display:flex;
  align-items:center;
  gap:16px;
}
.ba-header-actions .ba-btn{
  height:40px;
  padding:0 20px;
  font-size:0.95rem;
}
.ba-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  padding:8px;
  border-radius:var(--radius-btn);
}
.ba-burger span{
  display:block;
  width:100%;
  height:2px;
  background:var(--text-primary);
  transition:var(--transition);
}
.ba-burger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.ba-burger.open span:nth-child(2){
  opacity:0;
}
.ba-burger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ===== 分类横幅 ===== */
.cate-banner{
  padding:72px 0 48px;
  background:var(--bg-paper);
  border-bottom:1px solid var(--line-paper);
}
.cate-banner-inner{
  max-width:960px;
}
.cate-badge{
  display:inline-block;
  background:var(--gold-weak);
  border:1px solid rgba(200,161,90,0.3);
  color:#8B6F41;
  border-radius:var(--radius-pill);
  padding:4px 14px;
  font-size:0.8rem;
  font-weight:600;
  margin-bottom:16px;
}
.cate-banner h1{
  font-size:2.2rem;
  font-weight:800;
  line-height:1.2;
  color:var(--text-primary);
  letter-spacing:0.01em;
}
.cate-banner p{
  margin-top:14px;
  font-size:1.05rem;
  color:var(--text-secondary);
  max-width:680px;
}

/* ===== 锚点布局 ===== */
.cate-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:64px;
  padding-top:48px;
  padding-bottom:96px;
}
.cate-aside{
  position:sticky;
  top:96px;
  align-self:start;
  height:fit-content;
}
.cate-toc h3{
  font-size:0.95rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:16px;
  letter-spacing:0.02em;
}
.cate-toc a{
  display:flex;
  align-items:center;
  padding:10px 16px;
  font-size:0.95rem;
  font-weight:500;
  color:var(--text-secondary);
  border-left:2px solid transparent;
  transition:var(--transition);
  line-height:1.4;
}
.cate-toc a:hover{
  color:var(--accent-gold);
  border-left-color:var(--accent-gold);
  padding-left:20px;
}
.cate-toc a.active{
  color:var(--text-primary);
  font-weight:600;
  border-left-color:var(--accent-gold);
}
.cate-main{
  max-width:800px;
  width:100%;
}

/* ===== 区块通用 ===== */
.cate-section{
  padding:56px 0;
  border-bottom:1px solid var(--line-paper);
}
.cate-section:first-of-type{
  padding-top:0;
}
.cate-section h2{
  font-size:1.8rem;
  font-weight:700;
  color:var(--text-primary);
  line-height:1.3;
  margin-bottom:24px;
}
.cate-section p{
  font-size:1rem;
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:1.2em;
}
.cate-section h3{
  font-size:1.2rem;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:8px;
}
.cate-img{
  width:100%;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  margin:28px 0;
}
.cate-blockquote{
  background:var(--bg-card);
  border-left:4px solid var(--accent-gold);
  padding:20px 24px;
  border-radius:0 var(--radius-btn) var(--radius-btn) 0;
  margin:24px 0;
  color:#344054;
  font-size:0.95rem;
  line-height:1.75;
  font-style:italic;
  box-shadow:var(--shadow-card);
}

/* ===== 步骤 ===== */
.cate-steps{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:28px 0;
}
.cate-step{
  background:var(--bg-card);
  border:1px solid var(--line-paper);
  border-radius:var(--radius-card);
  padding:24px 28px;
  box-shadow:var(--shadow-card);
  transition:var(--transition);
}
.cate-step:hover{
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-2px);
}
.cate-step em{
  font-style:normal;
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent-gold);
  display:block;
  margin-bottom:6px;
  letter-spacing:0.05em;
}
.cate-step p{
  font-size:0.95rem;
  color:var(--text-secondary);
  margin-bottom:0;
}

/* ===== 奖励卡片 ===== */
.cate-reward-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:28px 0;
}
.cate-reward-item{
  background:var(--bg-card);
  border:1px solid var(--line-paper);
  border-radius:var(--radius-card);
  padding:24px;
  transition:var(--transition);
}
.cate-reward-item:hover{
  border-color:var(--accent-gold);
  box-shadow:0 4px 16px rgba(200,161,90,0.14);
}
.cate-reward-item h4{
  font-size:1.05rem;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:8px;
}
.cate-reward-item p{
  font-size:0.9rem;
  color:var(--text-secondary);
  margin-bottom:0;
}

/* ===== 表格 ===== */
.cate-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line-paper);
  border-radius:var(--radius-card);
  background:var(--bg-card);
  margin-top:28px;
  box-shadow:var(--shadow-card);
}
.cate-table-wrap table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
  min-width:520px;
}
.cate-table-wrap th{
  text-align:left;
  padding:14px 20px;
  background:var(--bg-paper);
  font-weight:600;
  color:var(--text-primary);
  border-bottom:1px solid var(--line-paper);
}
.cate-table-wrap td{
  padding:14px 20px;
  border-bottom:1px solid var(--line-paper);
  color:var(--text-secondary);
  vertical-align:top;
}
.cate-table-wrap tr:last-child td{
  border-bottom:none;
}
.cate-table-wrap tr:hover td{
  background:#FAFAF8;
}

/* ===== FAQ ===== */
.cate-faq-list{
  margin-top:28px;
}
.cate-faq-item{
  background:var(--bg-card);
  border:1px solid var(--line-paper);
  border-radius:var(--radius-card);
  margin-bottom:12px;
  overflow:hidden;
  transition:var(--transition);
}
.cate-faq-item.active{
  border-left:3px solid var(--accent-gold);
  box-shadow:var(--shadow-card);
}
.cate-faq-q{
  width:100%;
  padding:20px 24px;
  text-align:left;
  font-size:1rem;
  font-weight:600;
  color:var(--text-primary);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.cate-faq-q::after{
  content:"+";
  font-size:1.5rem;
  color:var(--accent-gold);
  font-weight:400;
  transition:var(--transition);
  flex-shrink:0;
  line-height:1;
}
.cate-faq-item.active .cate-faq-q::after{
  transform:rotate(45deg);
}
.cate-faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 24px;
}
.cate-faq-item.active .cate-faq-a{
  max-height:320px;
  padding-bottom:20px;
}
.cate-faq-a p{
  font-size:0.95rem;
  color:var(--text-secondary);
  line-height:1.75;
  margin-bottom:0;
}

/* ===== CTA ===== */
.cate-cta{
  position:relative;
  background-image:url('/assets/images/backpic/back-2.png');
  background-size:cover;
  background-position:center;
  border-radius:16px;
  padding:72px 40px;
  text-align:center;
  overflow:hidden;
  margin-top:56px;
  isolation:isolate;
  border:1px solid rgba(200,161,90,0.3);
}
.cate-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(11,15,20,0.82);
  z-index:-1;
}
.cate-cta h3{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-dark-primary);
  margin-bottom:12px;
}
.cate-cta p{
  font-size:1rem;
  color:var(--text-dark-secondary);
  margin-bottom:28px;
}
.cate-cta .ba-btn-outline{
  color:#C8A15A;
}

/* ===== 联系区块 ===== */
.ba-contact{
  background:var(--bg-card);
  border-bottom:1px solid var(--line-paper);
  padding:56px 0;
}
.ba-contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:center;
}
.ba-contact-grid h3{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-primary);
}
.ba-contact-grid > div p{
  margin-top:8px;
  color:var(--text-secondary);
  font-size:0.95rem;
}
.ba-contact-form{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.ba-contact-form input,
.ba-contact-form textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid #D0D5DD;
  height:48px;
  font-size:1rem;
  color:var(--text-primary);
  outline:none;
  padding:8px 0;
  transition:border-color .3s, box-shadow .3s;
  border-radius:0;
}
.ba-contact-form textarea{
  height:120px;
  resize:vertical;
  line-height:1.6;
}
.ba-contact-form input::placeholder,
.ba-contact-form textarea::placeholder{
  color:var(--text-weak);
}
.ba-contact-form input:focus,
.ba-contact-form textarea:focus{
  border-bottom-color:var(--accent-gold);
  box-shadow:0 2px 0 rgba(200,161,90,0.12);
}
.ba-contact-form .ba-btn{
  align-self:flex-start;
  margin-top:8px;
}

/* ===== 页脚 ===== */
.ba-footer{
  background:var(--bg-paper);
  padding:64px 0 24px;
}
.ba-footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
}
.ba-footer-brand .ba-footer-logo{
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-primary);
  display:inline-block;
  margin-bottom:14px;
}
.ba-footer-brand .ba-footer-logo span{
  color:var(--accent-gold);
}
.ba-footer-brand p,
.ba-footer-col p{
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:1.7;
}
.ba-footer-col h4{
  font-size:0.95rem;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:14px;
}
.ba-footer-col a{
  display:block;
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:2.2;
  transition:var(--transition);
}
.ba-footer-col a:hover{
  color:var(--accent-gold);
  padding-left:4px;
}
.ba-footer-bottom{
  border-top:1px solid var(--line-paper);
  margin-top:48px;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.ba-footer-bottom p{
  font-size:0.85rem;
  color:var(--text-weak);
}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .ba-nav{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    background:var(--bg-paper);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:16px 32px 24px;
    box-shadow:0 16px 32px rgba(16,24,40,0.08);
    border-bottom:1px solid var(--line-paper);
    display:none;
    z-index:99;
  }
  .ba-nav.open{
    display:flex;
  }
  .ba-nav-link{
    padding:14px 0;
    width:100%;
  }
  .ba-nav-link.active::before{
    display:none;
  }
  .ba-burger{
    display:flex;
  }
  .cate-layout{
    grid-template-columns:1fr;
    gap:24px;
    padding-top:32px;
  }
  .cate-aside{
    position:static;
    margin-bottom:8px;
  }
  .cate-toc{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    padding-bottom:8px;
  }
  .cate-toc h3{
    flex-shrink:0;
    margin-bottom:0;
    align-self:center;
    padding-right:8px;
  }
  .cate-toc a{
    border-left:none;
    border-bottom:2px solid transparent;
    padding:10px 14px;
    white-space:nowrap;
  }
  .cate-toc a:hover{
    border-left:none;
    padding-left:14px;
    border-bottom-color:var(--accent-gold);
  }
  .cate-toc a.active{
    border-left:none;
    border-bottom-color:var(--accent-gold);
  }
  .ba-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .ba-contact-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}

@media (max-width:768px){
  .ba-container{
    padding:0 20px;
  }
  .ba-header-inner{
    padding:0 20px;
  }
  .cate-banner{
    padding:56px 0 40px;
  }
  .cate-banner h1{
    font-size:1.8rem;
  }
  .cate-banner p{
    font-size:0.95rem;
  }
  .cate-section{
    padding:48px 0;
  }
  .cate-section h2{
    font-size:1.5rem;
  }
  .cate-reward-grid{
    grid-template-columns:1fr;
  }
  .cate-cta{
    padding:48px 24px;
  }
  .cate-cta h3{
    font-size:1.3rem;
  }
  .cate-steps .cate-step{
    padding:20px;
  }
  .ba-footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .ba-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:520px){
  body{
    font-size:0.95rem;
  }
  .ba-header-actions .ba-btn{
    display:none;
  }
  .cate-layout{
    padding-bottom:64px;
  }
  .cate-banner h1{
    font-size:1.6rem;
  }
  .cate-section h2{
    font-size:1.35rem;
  }
  .cate-section p{
    font-size:0.95rem;
  }
  .cate-step{
    padding:18px;
  }
  .cate-cta{
    padding:40px 20px;
    border-radius:12px;
  }
  .ba-contact-form .ba-btn{
    width:100%;
  }
}

/* roulang page: category2 */
:root {
  --bg-ink: #0B0F14;
  --bg-ink-2: #141A21;
  --line-ink: rgba(255, 255, 255, 0.08);
  --bg-paper: #F6F5F1;
  --bg-card: #FFFFFF;
  --line-paper: #E1E1DA;
  --accent-gold: #C8A15A;
  --gold-weak: rgba(200, 161, 90, 0.14);
  --accent-green: #A6FF3E;
  --accent-rose: #F05E6C;
  --status-done: #12B76A;
  --status-pending: #A6FF3E;
  --status-wait: #F79009;
  --text-dark: #1E252C;
  --text-dark-sub: #667085;
  --text-light: #E9ECEF;
  --text-light-sub: #9AA4B2;
  --text-weak: #98A2B3;
  --radius-card: 12px;
  --radius-btn: 8px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(16, 24, 40, 0.08), 0 16px 32px rgba(16, 24, 40, 0.10);
  --container: 1200px;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Inter, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font-sans);
  background: var(--bg-paper);
  color: var(--text-dark);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(200, 161, 90, 0.25); }

.ba-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.ba-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(246, 245, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-paper);
  z-index: 1000;
  transition: background 0.3s ease;
}
.ba-header.scrolled { background: rgba(246, 245, 241, 0.98); }
.ba-header-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ba-logo { font-size: 1.35rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.01em; line-height: 1.2; }
.ba-logo span { color: var(--accent-gold); font-weight: 600; }
.ba-nav { display: flex; align-items: center; gap: 32px; }
.ba-nav-link { font-size: 0.95rem; font-weight: 600; color: var(--text-dark-sub); padding: 4px 0; position: relative; transition: color 0.2s ease; }
.ba-nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--accent-gold); transition: width 0.3s ease; }
.ba-nav-link:hover { color: var(--text-dark); }
.ba-nav-link:hover::after { width: 16px; }
.ba-nav-link.active { color: var(--text-dark); }
.ba-nav-link.active::after { width: 16px; }
.ba-nav-link.active::before { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-gold); }
.ba-header-actions { display: flex; align-items: center; gap: 16px; }
.ba-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; border-radius: var(--radius-btn); transition: all 0.25s ease; cursor: pointer; }
.ba-btn-outline { height: 40px; padding: 0 22px; border: 1px solid var(--accent-gold); color: var(--accent-gold); background: transparent; }
.ba-btn-outline:hover { background: var(--gold-weak); color: var(--text-dark); }
.ba-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.ba-burger span { width: 20px; height: 2px; background: var(--text-dark); border-radius: 2px; transition: all 0.3s ease; }

.ba-breadcrumb { max-width: var(--container); margin: 96px auto 0; padding: 20px 32px 0; font-size: 0.85rem; color: var(--text-weak); }
.ba-breadcrumb a { color: var(--text-dark-sub); transition: color 0.2s; }
.ba-breadcrumb a:hover { color: var(--accent-gold); }
.ba-breadcrumb span { margin: 0 6px; color: var(--text-weak); }

.ba-cat-banner {
  background: var(--bg-paper);
  border-bottom: 1px solid var(--line-paper);
  padding: 40px 0 36px;
}
.ba-cat-banner-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.ba-cat-banner h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; color: var(--text-dark); margin-bottom: 12px; letter-spacing: -0.01em; }
.ba-cat-banner h1 .gold-text { color: var(--accent-gold); }
.ba-cat-banner p { font-size: 1rem; color: var(--text-dark-sub); max-width: 680px; line-height: 1.75; }

.ba-cat-main { display: flex; gap: 48px; max-width: var(--container); margin: 0 auto; padding: 56px 32px 80px; position: relative; }

.ba-cat-sidebar { width: 240px; flex-shrink: 0; position: sticky; top: 96px; align-self: flex-start; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 8px; }
.ba-cat-sidebar::-webkit-scrollbar { width: 3px; }
.ba-cat-sidebar::-webkit-scrollbar-thumb { background: var(--line-paper); border-radius: 3px; }
.ba-cat-sidebar-title { font-size: 0.8rem; font-weight: 700; color: var(--text-weak); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line-paper); }
.ba-cat-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.ba-cat-sidebar nav a { padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: var(--text-dark-sub); border-left: 2px solid transparent; transition: all 0.2s ease; }
.ba-cat-sidebar nav a:hover { background: var(--gold-weak); color: var(--text-dark); border-left-color: var(--accent-gold); }
.ba-cat-sidebar nav a.active { background: var(--gold-weak); color: var(--text-dark); border-left-color: var(--accent-gold); font-weight: 600; }

.ba-cat-content { flex: 1; min-width: 0; }
.ba-cat-section { padding: 48px 0; border-bottom: 1px solid var(--line-paper); scroll-margin-top: 100px; }
.ba-cat-section:first-child { padding-top: 0; }
.ba-cat-section:last-child { border-bottom: none; }
.ba-cat-section h2 { font-size: 1.7rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; margin-bottom: 16px; letter-spacing: -0.01em; position: relative; padding-left: 16px; }
.ba-cat-section h2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--accent-gold); }
.ba-cat-section h3 { font-size: 1.15rem; font-weight: 600; color: var(--text-dark); margin: 24px 0 10px; }
.ba-cat-section p { font-size: 0.98rem; color: var(--text-dark-sub); line-height: 1.8; margin-bottom: 16px; }
.ba-cat-section p:last-child { margin-bottom: 0; }
.ba-cat-section blockquote { margin: 20px 0; padding: 14px 20px; border-left: 4px solid var(--accent-gold); background: var(--gold-weak); border-radius: 0 8px 8px 0; font-size: 0.95rem; color: var(--text-dark); }

.ba-cat-img { margin: 24px 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.ba-cat-img img { width: 100%; height: auto; object-fit: cover; }
.ba-cat-img figcaption { font-size: 0.8rem; color: var(--text-weak); padding: 10px 16px; background: var(--bg-card); border-top: 1px solid var(--line-paper); }

.ba-task-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 20px; }
.ba-task-type { background: var(--bg-card); border: 1px solid var(--line-paper); border-radius: var(--radius-card); padding: 24px 20px; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ba-task-type:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.ba-task-type .ba-type-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-weak); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; color: var(--accent-gold); font-weight: 700; }
.ba-task-type h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); }
.ba-task-type p { font-size: 0.88rem; color: var(--text-dark-sub); line-height: 1.65; margin-bottom: 0; }

.ba-rewards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 20px; }
.ba-reward-card { background: var(--bg-ink-2); border-radius: var(--radius-card); padding: 28px 22px; text-align: center; position: relative; border: 1px solid var(--line-ink); transition: border-color 0.3s ease; }
.ba-reward-card:hover { border-color: var(--accent-gold); }
.ba-reward-card .ba-reward-tag { position: absolute; top: 14px; left: 14px; background: var(--gold-weak); color: var(--accent-gold); font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.ba-reward-card .ba-reward-num { font-size: 2.2rem; font-weight: 800; color: var(--text-light); margin: 20px 0 8px; line-height: 1; }
.ba-reward-card .ba-reward-num .unit { font-size: 1rem; color: var(--text-light-sub); font-weight: 500; margin-left: 2px; }
.ba-reward-card h4 { color: var(--text-light); font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.ba-reward-card p { color: var(--text-light-sub); font-size: 0.85rem; line-height: 1.6; }
.ba-reward-card .ba-reward-link { display: inline-block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--accent-gold); color: var(--accent-gold); font-size: 0.85rem; font-weight: 600; transition: color 0.2s; }
.ba-reward-card .ba-reward-link:hover { color: #B8923E; }

.ba-process-steps { margin: 28px 0; position: relative; padding-left: 32px; }
.ba-process-steps::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--accent-gold), var(--accent-green)); border-radius: 2px; }
.ba-process-step { position: relative; padding: 0 0 28px 24px; }
.ba-process-step:last-child { padding-bottom: 0; }
.ba-process-step .ba-step-dot { position: absolute; left: -31px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-gold); border: 3px solid var(--bg-paper); box-shadow: 0 0 0 2px var(--accent-gold); }
.ba-process-step h4 { font-size: 1.05rem; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.ba-process-step p { font-size: 0.92rem; color: var(--text-dark-sub); line-height: 1.7; margin-bottom: 0; }

.ba-progress-block { background: var(--bg-ink); border-radius: var(--radius-card); padding: 32px; margin: 28px 0; }
.ba-progress-block .ba-progress-title { color: var(--text-light); font-size: 1.1rem; font-weight: 600; margin-bottom: 18px; }
.ba-progress-item { margin-bottom: 18px; }
.ba-progress-item:last-child { margin-bottom: 0; }
.ba-progress-item .ba-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ba-progress-item .ba-progress-name { color: var(--text-light); font-size: 0.9rem; font-weight: 500; }
.ba-progress-item .ba-progress-pct { color: var(--accent-green); font-size: 0.82rem; font-weight: 700; }
.ba-progress-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ba-progress-bar .ba-progress-fill { height: 100%; border-radius: 3px; background: var(--accent-green); transition: width 1s ease; }
.ba-status-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; line-height: 1.4; }
.ba-status-badge.done { background: rgba(18, 183, 106, 0.15); color: var(--status-done); }
.ba-status-badge.claim { background: rgba(166, 255, 62, 0.18); color: #6CAE1A; }
.ba-status-badge.pending { background: rgba(247, 144, 9, 0.15); color: var(--status-wait); }
.ba-status-badge.locked { background: rgba(152, 162, 179, 0.15); color: var(--text-weak); }

.ba-table-wrap { overflow-x: auto; margin: 20px 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ba-table-wrap table { width: 100%; border-collapse: collapse; background: var(--bg-card); font-size: 0.9rem; }
.ba-table-wrap th, .ba-table-wrap td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-paper); }
.ba-table-wrap th { background: var(--gold-weak); color: var(--text-dark); font-weight: 600; white-space: nowrap; }
.ba-table-wrap td { color: var(--text-dark-sub); }
.ba-table-wrap tr:last-child td { border-bottom: none; }
.ba-table-wrap tr:hover td { background: rgba(200, 161, 90, 0.04); }

.ba-faq-list { margin: 28px 0 0; }
.ba-faq-item { border-bottom: 1px solid var(--line-paper); padding: 20px 0; }
.ba-faq-item:first-child { border-top: 1px solid var(--line-paper); }
.ba-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 600; color: var(--text-dark); padding: 4px 0; transition: color 0.2s; }
.ba-faq-item summary::-webkit-details-marker { display: none; }
.ba-faq-item summary:hover { color: var(--accent-gold); }
.ba-faq-item summary .ba-faq-icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; margin-left: 16px; }
.ba-faq-item summary .ba-faq-icon::before, .ba-faq-item summary .ba-faq-icon::after { content: ""; position: absolute; background: var(--accent-gold); border-radius: 1px; transition: transform 0.3s ease; }
.ba-faq-item summary .ba-faq-icon::before { width: 14px; height: 2px; top: 9px; left: 3px; }
.ba-faq-item summary .ba-faq-icon::after { width: 2px; height: 14px; top: 3px; left: 9px; }
.ba-faq-item summary:hover .ba-faq-icon::before, .ba-faq-item summary:hover .ba-faq-icon::after { background: var(--accent-gold); }
.ba-faq-item[open] summary { color: var(--text-dark); }
.ba-faq-item[open] summary .ba-faq-icon::after { transform: scaleY(0); }
.ba-faq-item .ba-faq-answer { padding: 14px 0 4px; color: var(--text-dark-sub); font-size: 0.95rem; line-height: 1.75; }

.ba-cat-cta { background: var(--bg-ink); border-radius: var(--radius-card); padding: 48px 40px; text-align: center; margin-top: 40px; }
.ba-cat-cta h3 { color: var(--text-light); font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.ba-cat-cta p { color: var(--text-light-sub); font-size: 0.9rem; margin-bottom: 24px; }
.ba-btn-gold { height: 48px; padding: 0 32px; background: var(--accent-gold); color: #101418; border: none; border-radius: var(--radius-btn); font-weight: 700; font-size: 0.95rem; position: relative; overflow: hidden; transition: all 0.25s ease; }
.ba-btn-gold:hover { background: #D4AE6E; transform: translateX(-2px); }
.ba-btn-gold:active { transform: translateY(1px); }
.ba-btn-outline-gold { height: 44px; padding: 0 28px; background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold); font-size: 0.95rem; font-weight: 600; border-radius: var(--radius-btn); transition: all 0.25s ease; }
.ba-btn-outline-gold:hover { background: var(--gold-weak); color: var(--text-dark); }

.ba-footer { background: var(--bg-paper); border-top: 1px solid var(--line-paper); padding: 56px 0 24px; margin-top: 0; }
.ba-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.ba-footer-logo { font-size: 1.2rem; font-weight: 800; color: var(--text-dark); }
.ba-footer-logo span { color: var(--accent-gold); }
.ba-footer-brand p { font-size: 0.88rem; color: var(--text-dark-sub); line-height: 1.7; margin-top: 12px; max-width: 260px; }
.ba-footer-col h4 { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
.ba-footer-col a { display: block; font-size: 0.88rem; color: var(--text-dark-sub); padding: 4px 0; transition: color 0.2s; }
.ba-footer-col a:hover { color: var(--accent-gold); }
.ba-footer-col p { font-size: 0.85rem; color: var(--text-dark-sub); line-height: 1.6; padding: 2px 0; }
.ba-footer-bottom { border-top: 1px solid var(--line-paper); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ba-footer-bottom p { font-size: 0.82rem; color: var(--text-weak); }

@media (max-width: 1024px) {
  .ba-cat-main { flex-direction: column; padding: 40px 24px 64px; gap: 32px; }
  .ba-cat-sidebar { position: static; width: 100%; max-height: none; overflow: visible; padding: 0; }
  .ba-cat-sidebar-title { display: none; }
  .ba-cat-sidebar nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .ba-cat-sidebar nav a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .ba-cat-sidebar nav a.active { border-bottom-color: var(--accent-gold); border-left: none; }
  .ba-task-types, .ba-rewards-grid { grid-template-columns: repeat(2, 1fr); }
  .ba-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ba-breadcrumb { margin-top: 72px; padding: 16px 24px 0; }
}

@media (max-width: 768px) {
  .ba-container, .ba-header-inner, .ba-cat-banner-inner { padding-left: 20px; padding-right: 20px; }
  .ba-nav { position: fixed; top: 72px; left: 0; right: 0; background: var(--bg-paper); flex-direction: column; align-items: flex-start; padding: 20px; gap: 12px; border-bottom: 1px solid var(--line-paper); transform: translateY(-120%); transition: transform 0.3s ease; z-index: 999; }
  .ba-nav.open { transform: translateY(0); }
  .ba-nav-link { font-size: 1rem; }
  .ba-burger { display: flex; }
  .ba-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ba-burger.open span:nth-child(2) { opacity: 0; }
  .ba-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .ba-cat-banner { padding: 32px 0 28px; }
  .ba-cat-banner h1 { font-size: 1.7rem; }
  .ba-cat-main { padding: 32px 20px 56px; }
  .ba-cat-section { padding: 36px 0; }
  .ba-cat-section h2 { font-size: 1.4rem; }
  .ba-task-types, .ba-rewards-grid { grid-template-columns: 1fr; }
  .ba-cat-cta { padding: 36px 24px; }
  .ba-cat-cta h3 { font-size: 1.2rem; }
  .ba-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .ba-footer-bottom { flex-direction: column; gap: 4px; }
  .ba-breadcrumb { padding: 14px 20px 0; }
}

@media (max-width: 520px) {
  .ba-logo { font-size: 1.1rem; }
  .ba-btn-outline { padding: 0 16px; font-size: 0.85rem; height: 36px; }
  .ba-task-types, .ba-rewards-grid { grid-template-columns: 1fr; }
  .ba-progress-block { padding: 24px 20px; }
  .ba-cat-cta { padding: 32px 20px; }
}