.article-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.af-btn {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-dim); padding: 7px 16px;
  font-size: 13px; font-family: var(--font-body); cursor: pointer; transition: all 0.2s;
}
.af-btn:hover { border-color: var(--border-accent); color: var(--text); }
.af-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.article-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.article-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: var(--text);
  transition: all 0.2s ease;
}
.article-card:hover {
  border-color: var(--border-accent); background: var(--bg-card-hover);
  transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); color: var(--text);
}
.article-card h2 { font-size: 17px; font-weight: 700; color: var(--text-bright); line-height: 1.35; margin: 0; }
.article-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 0; flex: 1; }
.article-meta { display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.article-date { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.article-read { font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); }
.article-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px;
  border-radius: 4px; font-weight: 700; width: fit-content;
}
.article-tag.comparison { background: rgba(108,92,231,0.15); color: #a78bfa; }
.article-tag.guide      { background: rgba(0,184,148,0.15);  color: #00b894; }
.article-tag.explainer  { background: rgba(0,206,201,0.15);  color: #00cec9; }
.article-tag.news       { background: rgba(253,203,110,0.15); color: #fdcb6e; }
.article-card.hidden { display: none; }