/* help articles page */
.container { min-height: 100vh; background: #f5f6fa; }


.search-wrap { padding: 10px 15px; }
.search-box {
  display: flex; align-items: center;
  background: #fff; border-radius: 8px;
  padding: 9px 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.search-icon { font-size: 14px; margin-right: 7px; }
.search-input { flex: 1; font-size: 14px; color: #333; }


.help-categories { display: flex; padding: 5px 10px 10px; overflow-x: auto; white-space: nowrap; }
.cat-item {
  display: inline-flex; flex-direction: column; align-items: center;
  width: 70px; padding: 10px 5px; margin-right: 8px;
  background: #fff; border-radius: 8px; flex-shrink: 0;
}
.cat-icon { font-size: 22px; margin-bottom: 4px; }
.cat-name { font-size: 12px; color: #333; font-weight: 500; }
.cat-count { font-size: 10px; color: #999; margin-top: 2px; }


.article-list { padding: 0 15px; }
.article-item {
  background: #fff; border-radius: 8px; padding: 14px;
  margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.article-tag {
  display: inline-block; font-size: 10px; color: #fff;
  padding: 2px 7px; border-radius: 3px; margin-bottom: 6px;
}
.article-tag.blue { background: linear-gradient(135deg, #667eea, #764ba2); }
.article-tag.green { background: linear-gradient(135deg, #11998e, #38ef7d); }
.article-tag.orange { background: linear-gradient(135deg, #f093fb, #f5576c); }
.article-tag.purple { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.article-title { font-size: 15px; font-weight: 600; color: #1a1a2e; display: block; margin-bottom: 4px; }
.article-desc { font-size: 12.5px; color: #666; display: block; line-height: 1.5; margin-bottom: 6px; }
.article-meta { display: flex; justify-content: space-between; font-size: 11px; color: #bbb; }


.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 40px; display: block; margin-bottom: 10px; }
.empty-text { font-size: 15px; color: #999; display: block; margin-bottom: 4px; }
.empty-hint { font-size: 12px; color: #ccc; display: block; }
.loading-tip { text-align: center; padding: 30px; color: #999; font-size: 13px; }


.subpage-header { display: flex; align-items: center; justify-content: space-between; padding: 15px; background: #fff; position: sticky; top: 0; z-index: 10; border-bottom: 0.5px solid #f0f0f0; }
.back-btn { font-size: 17px; color: #667eea; font-weight: bold; }
.sp-title { font-size: 16px; font-weight: 600; color: #1a1a2e; }