/* =========================================================
   隐形人机场 - 文章/教程页面专属样式
   ========================================================= */

/* ── Article Index Page ── */
.article-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-btn {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: rgba(99,102,241,0.1);
}

/* ── FAQ Page ── */
.faq-categories {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.faq-cat-btn {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.faq-cat-btn.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
}

.contact-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  margin-top: 60px;
}
.contact-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.contact-card p { color: var(--text-secondary); margin-bottom: 24px; }