.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: #52525b; background: #f4f4f5; border: 1px solid transparent; transition: all .15s;
  cursor: pointer;
}
.filter-pill:hover { background: #e4e4e7; }
.filter-pill.is-active { background: #7c3aed; color: #fff; }
.skill-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #f1f1f4;
  border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: all .2s;
}
.skill-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(124,58,237,.12); border-color: #e9d5ff; }
.skill-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.skill-icon {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5f3ff, #fdf4ff); color: #7c3aed; border: 1px solid #ede9fe;
}
.skill-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.badge-popular { background: #fff1f2; color: #e11d48; }
.badge-new { background: #ecfdf5; color: #059669; }
.skill-tag {
  font-size: 11.5px; font-weight: 500; color: #6d28d9; background: #f5f3ff;
  border: 1px solid #ede9fe; padding: 3px 9px; border-radius: 999px;
}
.btn-buy {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: #fff; background: #18181b; padding: 9px 16px; border-radius: 10px; transition: background .15s;
}
.btn-buy:hover { background: #7c3aed; }